React Native 传值方式

界面与界面之间的传值

事件监听(通知)
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。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在我生命的某个时刻,我特别盼望下雨,丝丝细雨和着新鲜的泥土气息扑面而来,在一个个昏昏入睡的午后,为我轻轻拉起一道帘...
    荣生实验室阅读 421评论 2 6
  • 总不经意间, 听到一首歌, 随着旋律, 心又不知, 飘向了何方…… 原来, 音乐, 真的可以带走人的灵魂…… 那种...
    一只等待的小猪猪阅读 341评论 3 6
  • 我们都是平凡人,不会唱歌,不会跳舞,不能熟练的掌握某一门乐器。 我们都是平凡人,会哭,会笑,会因为不开心的事生气好...
    扬灵Y阅读 436评论 0 0