React Native 页面之间传值、回传数据

很多同行最近都在苦思冥想一个问题：RN从A页面传值到B页面简单，但是我怎么从B页面传值到A页面呢，头大了！
http://blog.csdn.net/liu__520/article/details/52886493
下面我写了一个简单的示例，请各位同行参考下：

首先分三个页面：index.Android.js，first.js（简称A页面），next.js（简称B页面）

一、我们知道从A页面到B页面，是在navigator里面把值放进去，作为B页面的参数，B页面通过属性值获得这个参数：

下面这是index.android.js的内容

import React, { Component } from 'react';

import {

  AppRegistry,

  Navigator

} from 'react-native';

import FirstPage from './first';

class First extends Component {

  constructor(props){

    super(props);

    this.state={

      name:'刘成',

      age:28,

      QQ:null

    }

  }

  render() {

    let defaultName = 'firstpage';

    let defaultComponent = FirstPage;

    return (

      <Navigator

       initialRoute={{name:defaultName,component:defaultComponent}}

       renderScene={

         (route,navigator)=>{

           let Component = route.component;

           return <Component {...route.params} navigator={navigator}/>

         }

       }/>

    );

  }

}

AppRegistry.registerComponent('first', () => First);

下面这是first.js（A页面）的内容

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View

} from 'react-native';

import Next from './next';

export default class FirstPage extends Component {

  constructor(props){

    super(props);

    this.state={

      myname:'刘成',

      age:28,

      QQ:null,

    }

  }

  render() {

    return (

      <View style={styles.Container}>

        <Text style={styles.welcome}>

          第一页，我要把我的姓名、年龄传递给第二个页面，再从第二个页面把我的QQ号传回来

        </Text>

        <Text style={styles.instructions}>

          我的姓名：{this.state.myname}

        </Text>

        <Text style={styles.instructions}>

          我的年龄：{this.state.age}

        </Text>

        <Text style={{color:'blue',fontSize:20}}>

          我的QQ：{this.state.QQ}

        </Text>

        <Text style={{color:'red',fontSize:30}} onPress={this.gotoSecondPage}>

          点击我查询我的QQ

        </Text>

      </View>

    );

  }

  gotoSecondPage=()=>{

    const {navigator}=this.props;

    if (navigator) {

      navigator.push({

        name:'next',

        component:Next,

        params:{

          myname:this.state.myname,

          age:this.state.age,

          getQQ:(qq)=>{

            this.setState({

              QQ:qq

            })

          }

        }

      })

    }

  }

}

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,

  },

});

下面这是next.js（B页面）的内容

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

export default class Next extends Component {
  constructor(props){
    super(props);
    this.state={
      myname:this.props.myname,
      age:this.props.age,
      QQ:674668211
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          第二页，把他的QQ号告诉他
        </Text>
        <Text style={styles.instructions}>
          我的姓名：{this.props.myname}
        </Text>
        <Text style={styles.instructions}>
          我的年龄：{this.props.age}
        </Text>

        <Text style={styles.instructions}>
          我的QQ：{this.state.QQ}
        </Text>
        <Text style={{color:'red',fontSize:30}} onPress={this.gotoFirstPage}>
          回到上一页
        </Text>
      </View>
    );
  }
  gotoFirstPage=()=>{
    const {navigator}=this.props;
    let QQ = this.state.QQ;
    this.props.getQQ(QQ);
    if (navigator) {
      navigator.pop();
    }
  }
}
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,
  },
});

首先：我把我的姓名和年龄传值给B页面，然后把B页面我的QQ传递到A页面，

A页面在navigator里面给一个参数：getQQ，这个参数的值是一个方法，方法里面又有一个参数qq，方法体的内容是把A页面的QQ的状态设置为qq的值；

下面我们要从B页面获得这个qq参数值：

gotoSecondPage=()=>{

    const {navigator}=this.props;

    if (navigator) {

      navigator.push({

        name:'next',

        component:Next,

        params:{

          myname:this.state.myname,

          age:this.state.age,

          getQQ:(qq)=>{

            this.setState({

              QQ:qq

            })

          }

        }

      })

    }

  }

首先在B页面pop之前，我们给B页面的属性getQQ一个值，B页面的getQQ这个属性就是从A页面传过来的，这个属性其实就是一个函数，函数的参数就是B页面的QQ值

gotoFirstPage=()=>{

    const {navigator}=this.props;

    let QQ = this.state.QQ;

    this.props.getQQ(QQ);

    if (navigator) {

      navigator.pop();

    }

  }

这样我们就把QQ值传递给A页面：