如何在反應本機導航中傳遞數據？

Question

本機導航。

我想通過導航將主要組件中的數據“嗨”到食品組件。

這是我的代碼：

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

這是一個將數據從一個屏幕發送到另一個屏幕的代碼示例，以及如何在第二個屏幕的參數中獲取值。

屏幕一

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>
  );
};