在按下 TouchableOpacity 时反应本机数据传递

Question

我在

TouchableOpacity

中创建了两个

React Native

。代码。

const App = () => {

const notification = [
        { id: 1, name: 'David Silbia', message: 'Invite Jo Malone London’s Mother’s', time: 'Just now' },
        { id: 2, name: 'Adnan Safi', message: 'Started following you', time: '20 min ago' },
        { id: 3, name: 'Ronald C. Kinch', message: 'Like you events', time: '9 hr ago' },
        { id: 4, name: 'Clara Tolson', message: 'Join your Event Gala Music Festival', time: 'Wed, 3:30 pm' },
    ]

return (
<View style={{flexDirection:'row'}}>
     <TouchableOpacity 
       style={[styles.BellButton,{marginRight: 8,width: 50,}]}
       onPress={() => navigation.navigate("Notification", {item:notification})}>
     </TouchableOpacity>
     <TouchableOpacity style={styles.BellButton}
       onPress={() => navigation.navigate("Notification")}>
     </TouchableOpacity>
</View>
    )
}
export default App

按第 1 个 TouchableOpacity 时，它会随着

Notification page

移动到

notification data

。
按第二次 TouchableOpacity 时，它只会移动到

Notification page

。

通知页面：

const Notification = ({ route }) => {
    const navigation = useNavigation();
    const { item } = route.params;
    console.log(item)
    return ()
}
export default Notification

问题是我只想通过按

notification data

来发送

1st TouchableOpacity

，然后按

2nd TouchableOpacity

，它会移动到

Notification page

并且数据就在那里。

Answer 1

通过上面的代码，我假设您正在使用 React Navigation。

首先，确保您没有定义initialParams，因为它将与您传递到屏幕的任何内容合并。请参考：https://reactnavigation.org/docs/params#initial-params

其次，使用本机堆栈导航器，它的行为与假设的有点不同：如果屏幕存在于堆栈中，它将导航回现有屏幕，这是通过比较屏幕名称来确定的。要使用新参数（在您的情况下为空值）创建新屏幕，您需要按照此处的指导自定义 getId 道具：https://reactnavigation.org/docs/navigation-prop#navigate

第三，将数据（例如您的示例）作为导航参数传递被认为是一种反模式。最好使用某种形式的存储来更新/检索数据，例如 Redux。每当加载新页面时，它就可以根据所需的最小参数（例如 {isEmpty: true}）从存储加载数据。