React Native 传值方式

作者: 风中尘埃飘过 | 来源:发表于2018-03-21 09:30 被阅读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。

    相关文章

      网友评论

        本文标题:React Native 传值方式

        本文链接:https://www.haomeiwen.com/subject/rxjwqftx.html