ReactNative组件间的通信

2017-02-22 本文已影响1233人 45b645c5912e

父组件向子组件通信

父组件向子组件传值
通过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

ReactNative组件间的通信

父组件向子组件通信

子组件向父组件通信

非父子组件之间的传值

demo示例

Navigator传值

猜你喜欢

热点阅读