在React Native Navigator中的组件之间传递值
在React Native Navigator中的组件之间传递值
提问于 2015-11-20 23:36:55
如何在React Native中使用Navigator将数据从sceneA传递到sceneB？
我正在使用这个去访问sceneB：
this.props.navigator.push({
id: "MainPage",
name: 'mainPage'
});回答 5
Stack Overflow用户
回答已采纳
发布于 2015-11-21 00:38:09
您需要在导航器上设置passProps属性。最近有一些关于堆栈溢出的例子，特别是here和here。
<Navigator
initialRoute={{name: 'Main', component: Main, index: 0}}
renderScene={(route, navigator) => {
return React.createElement(<YourComponent />, { ...this.props, ...route.passProps, navigator, route } );
}} />或
<Navigator
initialRoute={{name: 'Main', component: Main, index: 0}}
renderScene={(route, navigator) => {
<route.component {...route.passProps} navigator={navigator} route={route} />
}
}
/>如果您正在寻找最基本的设置只是为了了解其功能，我已经设置了一个项目here供您参考，并粘贴了以下代码。
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
Image,
TouchableHighlight, TouchableOpacity
} = React;
class Two extends React.Component {
render(){
return(
<View style={{marginTop:100}}>
<Text style={{fontSize:20}}>Hello From second component</Text>
<Text>id: {this.props.id}</Text>
<Text>name: {this.props.name}</Text>
<Text>name: {this.props.myVar}</Text>
</View>
)
}
}
class Main extends React.Component {
gotoNext(myVar) {
this.props.navigator.push({
component: Two,
passProps: {
id: 'page_user_infos',
name: 'page_user_infos',
myVar: myVar,
}
})
}
render() {
return(
<View style={{flex: 4, flexDirection: 'column', marginTop:100}}>
<TouchableHighlight style={{ height:40, borderWidth:1, marginBottom:10, backgroundColor: '#ddd'}} name='Pole' onPress={ () => this.gotoNext('This is a property that is being passed') }>
<Text style={{textAlign:'center'}}>Go to next page</Text>
</TouchableHighlight>
</View>
)
}
}
class App extends React.Component {
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{name: 'Main', component: Main, index: 0}}
renderScene={(route, navigator) => {
if (route.component) {
return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
}
}}
navigationBar={
<Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} />
} />
);
}
}
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(index > 0) {
return (
<TouchableHighlight style={{marginTop: 10}} onPress={() => {
if (index > 0) {
navigator.pop();
}
}}>
<Text>Back</Text>
</TouchableHighlight>
)} else {
return null}
},
RightButton(route, navigator, index, navState) {
return null;
},
Title(route, navigator, index, navState) {
return null
}
};
var styles = StyleSheet.create({
});
AppRegistry.registerComponent('App', () => App);Stack Overflow用户
发布于 2016-07-10 12:04:29
我会把你的导航器设为this example。实际上，将导航器放在索引场景中，并将所有必要的组件导入其中。然后，定义一个renderScene()函数，根据名称(或id，就像您所做的那样)处理所有路由。我不会使用component对象作为从调用传递给navigator push方法的东西本身，因为如果这样做，您将不得不在该特定视图中导入组件。我过去经常这样做，并遇到了许多问题，所以我只是警告您，如果您遇到任何问题，请考虑使用这种方法。
renderScene(route, navigator) {
if(route.name == 'root') {
return <Root navigator={navigator} />
}
if(route.name == 'register') {
return <Register navigator={navigator} />
}
if(route.name == 'login') {
return <Login navigator={navigator} />
}
if(route.name == 'home') {
return <Home navigator={navigator} {...route.passProps} />
}
if(route.name == 'update') {
return <Update navigator={navigator} {...route.passProps} />
}
}
Stack Overflow用户
发布于 2016-06-03 19:03:21
有时传递属性不起作用(至少对我来说是这样)，所以我要做的就是在路由对象本身中传递它
nav.push({
id: 'MainPage',
name: 'LALA',
token: tok
});为了在下一个场景中访问它，我将使用
var token = this.props.navigator.navigationContext.currentRoute.token;虽然这是一种复杂的“访问”，但它是非常简单的传递道具，通过这种方式，你可以传递路由对象本身的属性，从而省去了以不同的方式发送它的麻烦。
这可能不是正确的方式，但我发现它更方便一点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33830493
复制相关文章
相似问题