react-native 学习总结

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react-native 学习总结脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

react-native 基础以及各个方面知识店等。一方面作为学习总结,另一方面也方便查阅,总结并无严格顺序,每天遇到则加上。

不同页面路由传输数据——与父子组件传递数据通信不一样

  • 从第一个页面,跳转到两一个页面时可以在navigator.push里面加入传输的参数

  • 从第二个页面返回到上一个页面时候也需要传递参数回上一个页面:但是navigator.pop()并没有提供参数,因为pop()只是从[路由1,路由2,路由3。。。]里把最后一个路由踢出去的操作,并不支持传递参数给倒数第二个路由,这里要用到一个概念,把上一个页面的实例或者回调方法,作为参数传递到当前页面来,在当前页面操作上一个页面的state:

sequenceDiagram
firstPage->>secondPage: navigator.push({para:{id:1})
secondPage->>firstPage: 回调方法传递到当前页面来

es5代码示例

navigator.push({
    name: 'SecondPagecomponent',
    component: SecondPageComponent,
    params: {
        id: this.state.id,
        //从SecondPageComponent获取user
        getUser: function(user) {
            _this.setState({
                user: user
            })
        }
    }
});

es6代码示例

navigator.push({
    name: 'SecondPageComponent',
    component: SecondPageComponent,
    params: {
        id: this.state.id,
        //从SecondPageComponent获取user
        getUser: (user)=>{
            this.setState({
                user: user
            })
        }
    }
});

react-native中文社区的navigator教程示例

    PressButton() {
            const { navigator } = this.PRops;
            if(this.props.getUser) {
                let user = USER_MODELS[this.props.id];
                this.props.getUser(user);
            }
            // 按到返回时候 先进行数据处理,用上级函数方法,然后再跳转回去
            if(navigator) {
                navigator.pop();
            }
    }

1.明显可以看出es6箭头函数的方便和简洁
2.但是物理返回键时数据处理(前面页面如何进行更新?解决中 extend backAndROId)
安卓back键的处理相关问题

脚本宝典总结

以上是脚本宝典为你收集整理的react-native 学习总结全部内容,希望文章能够帮你解决react-native 学习总结所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。