反应本机 – React Native Navigator

如何使用React Native中的Navigator将数据从sceneA传递给sceneB？

我用这个去现场B：

this.props.navigator.push({
    id: "MainPage",name: 'mainPage'
});

您需要在导航器上设置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',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',index: 0}}
          renderScene={(route,navigator) =>    {
            if (route.component) {
                          return React.createElement(route.component,route } );
                      }
                }}
          navigationBar={
            <Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} />
      } />
);
}
}


var NavigationBarRouteMapper = {
  LeftButton(route,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,navState) {
    return null;
  },Title(route,navState) {
    return null
  }
};


var styles = StyleSheet.create({

});

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

反应本机 – React Native Navigator

猜你在找的React相关文章