ReactNative组件间的通信

父组件向子组件通信

父组件向子组件传值
通过props传递在父组件中name='我是父组件向子组件传递的参数'
在子组件中通过this.props.name获取
父组件向子组件传递方法
与传递参数方法相同，通过props方法这样传递test={this.onParentClick1}
在子组件中触发这个方法this.props.test();

子组件向父组件通信

子组件向父组件传值
在子组件state中定义一个参数this.state = {name : '我是子组件向父组件传递的参数' };
在父组件中给子组件绑定ref,如 <Childern ref='childern' />
在父组件中获取子组件的state,如this.refs.childern.state.name
子组件向父组件传递方法
同样通过ref来获得，前两部与传参方法相同。
获取方法的方式也同样this.refs.childern.onChildenCilck2();

非父子组件之间的传值

组件之间无关联的形式与子组件向父组件传值的方式相同
通过ref给组件标记一个名字，同样通过this.refs.***.state/function方法相互调用。

demo示例

父子组件通信demo

点击父组件按钮打印子组件的state和方法

打印日志1
点击子组件按钮打印父组件的传递的参数和方法

打印日志2

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

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

export default class JSXDemo extends Component {
  render() {
    return (
      <View style={styles.bg}>
        <Parents />
      </View>

    );
  }
}


class Parents extends Component{
  render(){

    return(
      <View style={styles.parents}>
        <Childern ref='childern' name='我是父组件向子组件传递的参数' test={this.onParentClick1} />
        <Text >
          我是父组件
        </Text>
        <TouchableOpacity onPress={this.onParentClick2}>
          <Text style={styles.btn}>
            我是父组件按钮
          </Text>
        </TouchableOpacity>


      </View>
    )
  }
  onParentClick1 = ()=>{

    console.log('我是从父组件传递到子组件的方法');

  }
  onParentClick2 = ()=>{

    console.log(this.refs.childern.state.name);
    this.refs.childern.onChildenCilck2();

  }
}

class Childern extends Component {


  constructor(props) {
    super(props);
    this.state = {
      name : '我是子组件向父组件传递的参数'
    };
  }
  onChildenCilck1 = () =>{
    console.log(this.props.name);
    this.props.test();
  }

  onChildenCilck2 = () =>{

    console.log('我是子组件向父组件传递的方法');
  }

  render(){
    return(
      <View style={styles.childern}>
        <Text> 我是子组件 </Text>
          <TouchableOpacity onPress={this.onChildenCilck1}>
            <Text style={styles.btn}>
              我是子组件按钮
            </Text>
          </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  bg:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  parents: {
    width:300,
    height:300,
    backgroundColor:'red',
    justifyContent:'center',
    alignItems:'center'
  },
  childern: {
    width:100,
    height:100,
    marginTop:10,
    backgroundColor:'green',
    justifyContent:'center',
    alignItems:'center'

  },
  btn:{

    backgroundColor:'yellow',

  }

});

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

Navigator传值

push传值
首先在路由上配置{...route.params}

render() {
    let rootViewName = 'FirstView';
    let rootComponent = FirstView;

    return (
      <Navigator
        initialRoute = {{ name: rootViewName, component: rootComponent }}
        configureScene = {(route) => {
          return Navigator.SceneConfigs.HorizontalSwipeJump ;
        }}
        renderScene = {(route, navigator) => {
          let Component = route.component;
          return <Component {...route.params} navigator = {navigator} />
        }} />
    );
  }

然后在push的时候传params属性，下面的id: Id,就是我们要传递下去的参数

push = (Id) =>{
    var _this = this;
    const navigator = this.props.navigator;
    if (navigator) {
      navigator.push({
        name: 'SecondView',
        component: SecondView,
        params: {
          id: Id,
          getUser: function(user) {
            _this.setState({
              user: user
            })
          }
        }
      });
    }
  }

最后在二级界面通过props属性来接收,this.props.id就是上个界面传递过来的参数

componentDidMount() {
      this.setState({
        Id : this.props.id
      });
  }

pop回调
首先在一级界面将一个方法通过params向二级界面传递。下面的getUser: function(user) 方法就是我们传递下去的方法

push = (Id) =>{
    var _this = this;
    const navigator = this.props.navigator;
    if (navigator) {
      navigator.push({
        name: 'SecondView',
        component: SecondView,
        params: {
          id: Id,
          getUser: function(user) {
            _this.setState({
              user: user
            })
          }
        }
      });
    }
  }

在二级界面pop回调的时候，通过props触发这个方法。这样就实现了回调

pop = () =>{
    if (this.props.navigator) {
      this.props.navigator.pop();
      let user = USER_MODELS[this.state.Id];
      this.props.getUser(user);
    }
  }

上面的user就是回传的参数，在回调方法getUser中进行处理
代码展示
index.ios.js路由配置

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator
} from 'react-native';
import FirstView from './FirstView'
export default class ZZHNavigator extends Component {
  render() {
    let rootViewName = 'FirstView';
    let rootComponent = FirstView;
    return (
      <Navigator
        initialRoute = {{ name: rootViewName, component: rootComponent }}
        configureScene = {(route) => {
          return Navigator.SceneConfigs.HorizontalSwipeJump ;
        }}
        renderScene = {(route, navigator) => {
          let Component = route.component;
          return <Component {...route.params} navigator = {navigator} />
        }} />
    );
  }
}
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,
  },
});
AppRegistry.registerComponent('ZZHNavigator', () => ZZHNavigator);

FirstView一级界面

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import SecondView from './SecondView';
class FirstView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user : null
    };
  }
  push = (Id) =>{
    var _this = this;
    const navigator = this.props.navigator;
    if (navigator) {
      navigator.push({
        name: 'SecondView',
        component: SecondView,
        params: {
          id: Id,
          getUser: function(user) {
            _this.setState({
              user: user
            })
          }
        }
      });
    }
  }
  render() {
    return (
      <View style={styles.flex}>
        <Text style = {styles.btn} onPress = {() => this.push(0)}>
          查询ID为0的学生信息
        </Text>
        <Text style = {styles.btn} onPress = {() => this.push(1)}>
          查询ID为1的学生信息
        </Text>
        <Text style = {styles.btn} >
          {
            this.state.user? JSON.stringify(this.state.user) : ''
          }
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  flex:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
  },
  btn:{
    marginTop:10,
    padding:5,
    backgroundColor:'red',
    color:'white',
  }
});
export default FirstView;

SecondView二级界面

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
const USER_MODELS = {
  0: { 姓名: '小明', 性别: '男' },
  1: { 姓名: '韩梅梅', 性别: '女' }
};
class SecondView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Id : null
    };
  }
  componentDidMount() {
      this.setState({
        Id : this.props.id
      });
  }
  pop = () =>{
    if (this.props.navigator) {
      this.props.navigator.pop();
      let user = USER_MODELS[this.state.Id];
      this.props.getUser(user);
    }
  }
  render() {
    return (
      <View style={styles.flex}>
        <Text style = {styles.btn}>
          我是学生{this.state.Id}信息
        </Text>
        <Text style = {styles.btn}>
          {
            JSON.stringify(USER_MODELS[this.state.Id])
          }
        </Text>
        <Text style = {styles.btn} onPress = {() => this.pop()}>
          点我返回上一页
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  flex:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
  },
  btn:{
    marginTop:10,
    padding:5,
    backgroundColor:'red',
    color:'white',
  }
});
export default SecondView;

Demo展示
一级界面有两个学生按钮，点击跳向二级界面，分别传递不同的id

FirstView.jpeg
二级界面通过传过来学生id，在字典中得到相应的学生数据。

SecondView.jpeg
点击按钮返回一级界面，讲二级界面得到的学生对象user回传给一级界面，并且通过回调方法，将数据渲染在界面上。

回调.jpeg

最后编辑于：2017.12.06 00:11:47

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,491评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,856评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,745评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,196评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,073评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,112评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,531评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,215评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,485评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,578评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,356评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,215评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,583评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,898评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,174评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,497评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,697评论 2赞 335

ReactNative组件间的通信

父组件向子组件通信

子组件向父组件通信

非父子组件之间的传值

demo示例

Navigator传值

推荐阅读更多精彩内容