如何在react native导航中传递数据?

Question

本地导航。

我想"hi"数据通过导航从主组件到食品组件。

这是我的代码:

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

const Food = ({navigation}) => {
console.log(hi);
return (
);
};

我如何修复我的代码?

Answer 1

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

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

Answer 2

不确定错误消息是什么或您想要实现什么。但如果试图传递数据的按钮点击，同时导航到一个新的屏幕。

按下按钮试试这样做;

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

这是考虑到你有正确的导航设置，例如堆栈导航器，堆栈屏幕等在app.js/index.js