{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我只想做你的唯一 的问题《React Native - Passing Data Across Screens》','https://www.manongdao.com/q-632658.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm having some trouble with a react-native app. I can't figure out how to pass data across screens.
I realize that there are other similar questions that are answered on SO, however the solutions did not work for me.
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
});
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.
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 });
Edit: Here is my actual code structure:
The data comes from a 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>
);
}
From parent screen:
or
From child screen:
const category = this.props.navigation.state.params.categorySo looking at the above described issue I think you are looking for something like
screenProps(documented here).This allows you to pass a specific props across screens.
I hope this helps. Please let me know if you need anything else.
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.You should fix your code like below,
And you can read your parameter like below.
Using the following code snippet, you can navigate to another screen with some values.
and you can collect the parameter at HomeScreen using,