如何在 React Native 导航中传递数据？

Question

原生导航。

我想通过导航将数据从 Main Component“hi”到 Food Component。

这是我的代码：

const Main = ({navigation}) => {

     dispatch({
          type: COOK_UP_REQUEST,
     })
     navigation.navigate('Food' ,{hi:"hi"});
},[]);     


const Food = ({navigation}) => {

   console.log(hi);

     return (

     );
};

如何修复我的代码？

Answer 1

不确定错误消息是什么或您要达到的目的。但是，如果在导航到新屏幕时尝试通过单击按钮传递数据。

在按下按钮时尝试类似的操作；

  onPress={() => navigate('Food', { hi: "hi"})}

考虑到您已正确设置导航，例如app.js/index.js

中的 Stack Navigator、Stack Screen 等

Answer 2

这是一个代码示例，用于将数据从一个屏幕发送到另一个屏幕，以及如何在第二个屏幕中获取参数中的值。

屏幕 1

const Main = ({ navigation }) => {
  const onButtonPress = () => {
    navigation.navigate('', { hi: 'hi' }); // Passing Value
  };
  return (
    <View>
      <Button onPress={onButtonPress} />
    </View>
  );
};

屏幕 2

const Food = ({ route }) => {
  const { hi } = route.params; // Receiving Value

  console.log('hi', hi);

  return (
    <View>
      <Text>{hi}</Text>
    </View>
  );
};

如何在 React Native 导航中传递数据？

How can I pass data in react native navigation?

javascript

dom-events

reactjs

react-native