十五、Navigator基本的使用（二）

最新推荐文章于 2022-11-29 22:27:15 发布

weixin_33989780

最新推荐文章于 2022-11-29 22:27:15 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a31242e6fb9a044fa19dc84

本文介绍了React Native中实现页面间传值的两种方法：正向传值与反向传值，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.正向传值

//params对应的就是我们要传的值，这里我传了两个值
goPage2() {
        this.props.navigator.push({
            component:SecondPageComponent,
            params:{//params 要和HomePage.js里面的 renderScene(route, navigator)里面设置的参数名一样
                param1:'第一个参数',
                param2:'第二个参数',
            }
        })
    }

// 接收
constructor(props){
        super(props);
//这两个属性就是我们要接收第一页传过来的两个值
        this.state = {
            paramGet1:PropTypes.string,
            paramGet2:PropTypes.string,
        };
    }


//这个方法就是声明周期的其中一个了，render（）运行后，就会调用这个方法，我们在这里接收传过来的两个值
 componentDidMount() {
        //这里获取从FirstPageComponent传递过来的参数
        this.setState({
            paramGet1: this.props.param1,
            paramGet2: this.props.param2,

        });

    }
复制代码

2.反向传值 2.1类似iOS通知的回传

// 第二个页面触发
buttonAction() {

        DeviceEventEmitter.emit('changeData','回传参数');

    }

// 第一个页面监听
//在这个方法里面注册监听
//changeData  就是监听的名字,类似通知的名字
//value就是上面对应的“回传参数”，就是其他地方传过来的值
//两个参数，一个是监听名字，一个是方法（收到监听处理方法）
componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('changeData', (value) =>{
            this.setState({
                paramData:value,
            });
            console.log('传过来的值是:'+value);
        });
    }
//页面移除时移除监听
//类似iOS  dealloc里面移除通知
    componentWillUnmount() {
        this.subscription.remove();
    }
复制代码

2.2类似block传值

 goPage2(type) {
        this.props.navigator.push({
            component:SecondPageComponent,
            type:type,
            params:{//params 要和HomePage.js里面的 renderScene(route, navigator)里面设置的参数名一样
                param1:'第一个参数',
                param2:'第二个参数',
                loadData:(data) => {this.loadData(data)},//回调方法
            }
        })
    }

    loadData(data){
        console.log('回调方法传参：data='+data);
    }

// 第二个页面
  if(this.props.loadData){//这里是判断是否有这个方法的
            this.props.loadData('回传参数1');
        }
复制代码