内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用
尝试过这个代码:
this.props.navigator.push({ id: "MainPage", name: 'mainPage' });
需要在导航器上设置passProps属性
<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} /> } } />
已经设置了一个项目
'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);