使用功能样式组件时如何在屏幕之间传递数据

Question

我有一个像下面这样的功能组件

const Screen1 = ({navigation}) => {
  return (
...
...
<Button
   onPress={() => {
   sqlite_wrapper.createtable(sqlite_wrapper.collection_product)
   navigation.navigate('Screen2');
        }}
/> 
...
...
  )

如果它是一个 class 组件，我可以使用 this 如下

this.props.navigation.navigate('Screen2', {
     yourArray: this.state.yourArray, });
   }

由于我使用的是纯功能组件，因此如何在屏幕之间发送和访问数据。

Answer 1

嗨，即使您使用的是功能组件，您也可以像往常一样在 navigation.navigate 方法中将参数作为对象传递。

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

Link 到他们解释它的官方文档：https://reactnavigation.org/docs/params