React Native - 跨屏幕传递数据 [英] React Native - Passing Data Across Screens
问题描述
我在 react-native 应用中遇到了一些问题。我无法弄清楚如何跨屏幕传递数据。
I'm having some trouble with a react-native app. I can't figure out how to pass data across screens.
我意识到还有其他类似的问题可以在SO上得到解答，但解决方案对我不起作用。
I realize that there are other similar questions that are answered on SO, however the solutions did not work for me.
我正在使用 StackNavigator 。这是我在 App.js 文件中的设置。
I'm using the StackNavigator. Here's my setup in my App.js file.
export default SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Categories: { screen: CategoriesScreen }, // send from here
Category: { screen: CategoryScreen } // to here
});
我有一个 TouchableHighlight 组件 onPress 将导航到所需屏幕的事件。这是在我的 Categories.js 文件/屏幕上。
I have a TouchableHighlight component which has a onPress event that will navigate to the desired screen. This is on my Categories.js file/screen.
<TouchableHighlight onPress={(id) => {
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name}</Text>
</TouchableHighlight>
当我点击元素时，屏幕确实切换到类别，但它无法发送道具数据。
When I click the element, the screen does indeed switch to category, however it fails to send the props data.
所以当我检查数据时我的类别屏幕，它返回undefined。我尝试了以下方法：
So when I check the data in my Category screen, it returns undefined. I have tried the following methods:
this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category
我究竟能如何访问我通过
传递的数据导航方法？
How exactly can I access that data that I passed in
the navigate method?
navigate('Category', { category: id });
编辑：这是我的实际代码结构：
Here is my actual code structure:
数据来自 API 。
for (var i = 0; i < data.length; i++) {
var name = data[i].name;
var id = data[i].id;
categoryComponents.push(
<Card key={id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(id) => {
const { navigate } = this.props.navigation;
navigate('Category', { params: { category: id } });
}}>
<Text>{name + " " + id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}
推荐答案
您的问题没有发送参数。你正确地发送并正确阅读。您的错误与 id 未定义有关。
Your problem isn't sending the parameter. You are sending it right and reading it right. Your error is related to that your id is undefined.
您应修改下面的代码，
for (var i = 0; i < data.length; i++) {
var name = data[i].name;
var id = data[i].id;
categoryComponents.push(
<Card key={id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(event) => {
// onPress event fires with an event object
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name + " " + id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}
您可以阅读以下参数。
this.props.navigation.state.params.category
这篇关于React Native - 跨屏幕传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
