javascript React Native - 跨屏幕传递数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46526939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native - Passing Data Across Screens
提问by Lars Peterson
I'm having some trouble with a react-nativeapp. I can't figure out how to pass data across screens.
我在使用react-native应用程序时遇到了一些问题。我不知道如何跨屏幕传递数据。
I realize that there are other similar questions that are answered on SO, however the solutions did not work for me.
我意识到还有其他类似的问题在 SO 上得到了回答，但是这些解决方案对我不起作用。
I'm using the StackNavigator. Here's my setup in my App.jsfile.
我正在使用StackNavigator. 这是我在我的App.js文件中的设置。
export default SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Categories: { screen: CategoriesScreen }, // send from here
Category: { screen: CategoryScreen } // to here
});
I have a TouchableHighlightcomponent which has a onPressevent that will navigate to the desired screen. This is on my Categories.jsfile/screen.
我有一个TouchableHighlight组件，它有一个onPress可以导航到所需屏幕的事件。这是在我的Categories.js文件/屏幕上。
<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 propsdata.
当我单击该元素时，屏幕确实切换到category，但无法发送props数据。
So when I check the data in my Categoryscreen, it returns undefined. I have tried the following methods:
因此，当我检查Category屏幕中的数据时，它返回未定义。我尝试了以下方法：
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 navigatemethod?
我究竟如何访问我在navigate方法中传递的数据？
navigate('Category', { category: id });
Edit: Here is my actual code structure:
编辑：这是我的实际代码结构：
The datacomes from a API.
在data来自一个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>
);
}
采纳答案by bennygenel
Your problem isn't sending the parameter. You are sending it right and reading it right. Your error is related to that your idis undefined.
您的问题不是发送参数。您发送正确，阅读正确。您的错误与您id的未定义有关。
You should fix your code like below,
你应该像下面一样修复你的代码，
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>
);
}
And you can read your parameter like below.
你可以像下面一样阅读你的参数。
this.props.navigation.state.params.category
回答by Apurva jain
So looking at the above described issue I think you are looking for something like screenProps(documented here).
所以看着上面描述的问题，我认为你正在寻找类似的东西screenProps（记录在这里）。
This allows you to pass a specific props across screens.
这允许您跨屏幕传递特定的道具。
I hope this helps. Please let me know if you need anything else.
我希望这有帮助。如果您需要其他任何东西，请告诉我。
回答by Codemaker
Using the following code snippet, you can navigate to another screen with some values.
使用以下代码片段，您可以导航到具有某些值的另一个屏幕。
navigate({ Home: 'HomeScreen', params: { username: 'abcd' } })
and you can collect the parameter at HomeScreen using,
您可以使用 HomeScreen 收集参数，
this.props.navigation.state.params.username
回答by Alexander Vitanov
From parent screen:
从父屏幕：
navigate({ routeName: 'Category', params: { category: id } })
or
或者
navigate('Category', { category: id })
From child screen:
从子屏幕：
const category = this.props.navigation.state.params.category
const category = this.props.navigation.state.params.category
