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键的处理相关问题
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。