React Nativereact-native

React Native 传值方式

2018-03-21  本文已影响0人  风中尘埃飘过

界面与界面之间的传值

事件监听(通知)
import {
     DeviceEventEmitter
 } from 'react-native';

  componentDidMount() {
    this.event = DeviceEventEmitter.addListener("onClickButton", (text,...) => { //注册通知
      console.log(text);
      this.onClickAddButton(text)
    });

  }
    componentWillUnmount(){
        // 移除通知 
        this.listener.remove();
    }
    //发送通知 第一个参数是通知名称,后面的参数是发送的值可以多个
    DeviceEventEmitter.emit('onClickButton','test',...)

事件回调(类与类之间的传值)

通过navigation带过去的参数实现事件回调,类似于OC的block,使用方法如下
A.js

this.props.navigation.push('A', { title:'个人信息', callback:(msg)=>{ alert(msg) } }) //第一个参数是需要调整的路由名称,第二个参数就是传过去的参数。

B.js

this.props.navigation.state.params.callback('反向传值的参数')
this.props.navigation.state.params.title //正向传值
属性传值(组件与组件之间的传值)
import React,{Component} from 'react';
import {View,Text, AppRegistry, Button, StyleSheet,TouchableOpacity,Image,FlatList} from 'react-native';

export default class ValueView extends Component {
  render(){
    return (
      <View style={{flex: 1}}>
        <SuperView testTitle='这是一个测试'/>
      </View>
    );
  }
}

class SuperView extends Component {
  constructor(props) {
    super(props);
  }
    render() {
      return (
        <View style={{flex: 1, alignItems: 'center'}}>
          <SubView
            onclickFunction={this.onclickFunction.bind(this)}
            ref="son" />
        </View>
      );
    }

    onclickFunction(text){
      this.refs.son.receiveMoney(1000);
      console.log(this.props.testTitle);
      console.log(text);
    }
}

class SubView extends Component {
    render() {
      return (
        <View>
          <TouchableOpacity
            onPress={this._onPress}
            style={{backgroundColor: 'red', alignSelf: 'center'}}>
            <Text>
              点击回传结果
            </Text>
          </TouchableOpacity>
        </View>
      );
    }
    receiveMoney(money){
      console.log(money);
    }
    _onPress = () => {
      this.props.onclickFunction('反向传值') //这里就能调用父组件的onclickFunction(text)方法
    }
}

注意:
1.属性传值只能用于父子组件之间的传值,如果要无关的组件传值或者是跨组件传值的话目前只能使用事件监听(通知)的方式
2.<SubView ref="son" />相当于是把SubView组件添加了一个标记son然后绑定到了ref上面,我们通过this.refs.son就可以直接获取到SubView这个对象 即SubView的this = this.refs.son。

上一篇下一篇

猜你喜欢

热点阅读