react native Navigator 属性传参应用

react native Navigator 属性传参应用

1、命令行创建、运行：

 react-native init myrnprj1  // 创建工程 cd myrnprj1 react-native start  // 开启packager服务 -- Running packager on port 8081.

//浏览器地址栏输入：http://localhost:8081/index.android.bundle?platform=android （正常会显示index.android.bundle 内容），同时命令行会显示 Bundling index.android.js *, done.

2、在index.android.js同级目录下添加功能测试文件：
first.js second.js style.js

index.android.js：

import React, { Component } from 'react';import {  AppRegistry,  Navigator} from 'react-native';import FirstPage from './first';class myrnproj1 extends Component {  constructor(props){    super(props);  }  render() {    return (      <Navigator       initialRoute={{name:'FirstPage',component:FirstPage}} // 初始化 route, 即指定要显示的component       renderScene={         (route,navigator)=>{           let Component = route.component;           return <Component {...route.params} navigator={navigator}/>         }       }/>    );  }}AppRegistry.registerComponent('myrnproj1', () => myrnproj1);   

first.js：

import React, { Component } from 'react';import {  AppRegistry,  Text,  View} from 'react-native';import Second from './second';import {styles} from './style';export default class FirstPage extends Component {  constructor(props){    super(props);    this.state={      name:'wang zu xing',      job:'',    }  }  render() {    return (      <View style={styles.Container}>        <Text style={styles.welcome}>          first page, transfer name to second page, get job        </Text>        <Text style={styles.instructions}>          my name: {this.state.name}        </Text>        <Text style={styles.instructions}>          my job: {this.state.job}        </Text>        <Text style={{color:'red',fontSize:25}} onPress={this.goSecondPage}>          get job        </Text>      </View>    );  }  goSecondPage=()=>{    const {navigator} = this.props; // this.props.navigator 属性    if (navigator) {      navigator.push({  //通过属性传参给second.js        name:'Second',        component:Second,        params:{          name:this.state.name,          getJob:(job)=>{             this.setState({              job:job            })          }        }      })    }  }}

second.js：

import React, { Component, PropTypes} from 'react';import {  AppRegistry,  Text,  View} from 'react-native';import {styles} from './style';export default class SecondPage extends Component {  constructor(props){    super(props);    this.state={      job:'android engineer'    }  }  //实例化调用，默认属性props  static get defaultProps() {     return {        name: "",        age: 35     }  }  // 定义属性及约束      static propTypes = {     name: PropTypes.string.isRequired,     age: PropTypes.number.isRequired  }  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>          second page, return job        </Text>        <Text style={styles.instructions}>          name: {this.props.name}        </Text>        <Text style={styles.instructions}>          age: {this.props.age}        </Text>        <Text style={styles.instructions}>          job: {this.state.job}        </Text>        <Text style={{color:'red',fontSize:25}} onPress={this.goFirstPage}>          first page        </Text>      </View>    );  }  goFirstPage=()=>{    const {navigator} = this.props;    let job = this.state.job;    this.props.getJob(job); // this.props.getJob属性对应goSecondPage()中的params中的getJob项，回传参数    if (navigator) {        navigator.pop();    }  }}

style.js：

import {  StyleSheet} from 'react-native';export const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});

3、从新打开一个命令行窗口，运行android真机/模拟器，进入当前项目myrnprj1目录，执行

react-native run-android