Reactnative 在 React Native Navigator 中的组件之间传递值

您需要在导航器上设置passProps属性.最近有几个关于堆栈溢出的例子，特别是here和here.

<Navigat或
  initialRoute={{name: 'Main', component: Main, index: 0}}
  renderScene={(route, navigat或) =>    {
    return React.createElement(<YourComponent />, { ...this.props, ...route.passProps, navigat或, route } );
  }} />

或

<Navigat或
  initialRoute={{name: 'Main', component: Main, index: 0}}
  renderScene={(route, navigat或) => {
      <route.component {...route.passProps} navigat或={navigat或} route={route} />
     }
   }
 />

If you are looking f或 the most basic of setups just to understand the functionality, I have set up a project here that you can reference, and pasted the code below.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigat或,
  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.navigat或.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, b或derWidth:1, marginBottom:10, backgroundCol或: '#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 (
      <Navigat或
                style={{flex:1}}
          initialRoute={{name: 'Main', component: Main, index: 0}}
          renderScene={(route, navigat或) =>    {
            if (route.component) {
                          return React.createElement(route.component, { ...this.props, ...route.passProps, navigat或, route } );
                      }
                }}
          navigationBar={
            <Navigat或.NavigationBar routeMapper={NavigationBarRouteMapper} />
      } />
);
}
}


var NavigationBarRouteMapper = {
  LeftButton(route, navigat或, index, navState) {
    if(index > 0) {
      return (
      <TouchableHighlight  style={{marginTop: 10}} onPress={() => {
            if (index > 0) {
              navigat或.pop();
            } 
        }}>
       <Text>Back</Text>
     </TouchableHighlight>
 )} else {
 return null}
 },
  RightButton(route, navigat或, index, navState) {
    return null;
  },
  Title(route, navigat或, index, navState) {
    return null
  }
};


var styles = StyleSheet.create({

});

AppRegistry.registerComponent('App', () => App);