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

很多同行最近都在苦思冥想一个问题：RN从A页面传值到B页面简单，但是我怎么从B页面传值到A页面呢，头大了！

下面我写了一个简单的示例，请各位同行参考下：

首先分三个页面：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页面：