ReactNative官网例子练习（五）——页面跳转传参

    上一篇文章练习了Rn中使用Navigator跳转页面。我们一个完成的应用中一般不仅仅是跳转页面，经常还会传一些参数到下一个界面。Rn中怎么实现传参呢？
例子代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Image,
  Navigator
} from 'react-native';

class RnWidget extends Component {

  render() {
      let defaultName = 'firstPageName';
      let defaultComponent = FirstPageComponent;

    return (
      <Navigator
      styles = {styles.container}
      initialRoute = {{name: defaultName,component : defaultComponent}}
      configureScene = {
        (route)=>{
          return Navigator.SceneConfigs.FloatFromRight
        }
      }
      renderScene = {(route,navigator)=>{
          let Component = route.component;
          return <Component{...route.params} navigator={navigator}/>
      }}
      />
    )
  }
}
//第一个界面
class FirstPageComponent extends Component{
  constructor(props){
    super(props);
    this.state={
      title :"title哈哈"
    }
  }
  clickJump(){
    //因为Navigator <Component {...route.params} navigator={navigator} />传入了navigator 所以这里能取到navigator
    const{navigator} = this.props;
    let that = this;
    if(navigator){
      navigator.push({
        name : "SecondPageComponent",
        component : SecondPageComponent,
        params :{
          title:this.state.title, 
          id:123,
          getUser:function(user){
            that.setState({
              user:user
            })
          }
        }
      })
    }
  }
render(){
  return(
    <View style={styles.container}>
    <Text>我是第一个界面</Text>
    <TouchableHighlight
       underlayColor="rgb(181, 136, 254)"
       activeOpacity={0.5}  
       style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
       onPress={this.clickJump.bind(this)}
    >
    <Text>点击进入第二个界面</Text>
    </TouchableHighlight>
    <Text>第二个界面返回：{this.state.user}</Text>
    </View>
  )
}
}

//第二个界面
class SecondPageComponent extends Component{
  constructor(props){
    super(props);
    this.state={
    id:null
  }
}
 clickJump(){
   if(this.props.getUser){
     this.props.getUser("大海")
   }
    const{navigator} = this.props;
    if(navigator){
      //把当前页面pop掉 回到上一个页面
      navigator.pop();
    }
  }

componentDidMount(){
 this.setState({
   title:this.props.title,
   id:this.props.id
 })
}
  render(){
    return(
       <View style={styles.container}>
    <Text>我是第二个界面</Text>

    <TouchableHighlight
       underlayColor="rgb(181, 136, 254)"
       activeOpacity={0.5}  
       style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
       onPress={this.clickJump.bind(this)}
    >
    <Text>点击返回第一个界面</Text>
    </TouchableHighlight>

    <Text>第一个界面传入：{this.state.title}</Text>
    </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },

});
AppRegistry.registerComponent('RnWidget', () => RnWidget);

• 第一个页面传入到第二个页面
  首先在第一个界面navigator.push的时候参数里面添加一个params的参数。里面就是我们想要传到下一个界面的数据。比如这里传个title

 navigator.push({
        name : "SecondPageComponent",
        component : SecondPageComponent,
        params :{
          title:this.state.title,
        }
      })

第二个界面在生命周期函数componentDidMount()中给state赋值。componentDidMount是当render()完成的时候调用

componentDidMount(){
 this.setState({
   title:this.props.title,
 })
}

• 第二个页面传回第一个页面
  在第一个页面的push的参数params里面增加一个方法接收下一个页面传过来的参数然后更改当前的state中的值

params :{
          title:this.state.title, 
          id:123,
          getUser:function(user){
            that.setState({
              user:user
            })
          }
        }

第二个页面在navigator.pop();之前调用第一个界面传过来的getUser方法。

 if(this.props.getUser){
     this.props.getUser("大海")
   }

效果：