最近开发react native项目,组件跳转带参数可以有两种做法
首先先罗列navigator对象包括的方法
push(route)——导航到一个新的路线
pop()——返回一个页面
popN(n)——一次返回 N 页。当 N=1 时,该行为相当于pop()
replace(route)——取代当前页面的路线,并立即为新路线加载视图
replacePrevious(route)——取代前一页的路线/视图
replacePreviousAndPop(route)——取代了以前的路线/视图并转换回去
resetTo(route)——取代顶级的项目并 popToTop
popToRoute(route)——为特定的路线对象回到项目
popToTop()——回到顶级项目
关于组件参数传递
1.使用push跳转组件:传递的时候就是直接的组件跳转带props
demo:
/**
* 跳转到 选择类型
* @param name 名称
* @param type 跳转效果
*/
selectType(name,type){
this.props.navigator.push({
name:"SelectType",//跳转的组件名称
passProps:{
name:name,
LocalCityName:this.props.LocalCityName,
LocalProvinceName:this.props.provinceName,
cityName:this.props.cityName,
provinceName:this.props.provinceName
},
type: 'Right'//跳转动画
})
}
2.如果子组件需要返回父亲组件 可以用过上一个页面的实例或者回调方 法,作为参数传递到当前页面来,在当前页面操作上一个页面的state
父组件:
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
params: {
id: this.state.id
getUser: function(user) {//这里是父亲组件传递给子组件的回调函数
_this.setState({
user: user
})
}
}
});
子组件: 这里可以拿到getUser,getUser指向父组件的传递过来回调函数,这样你通过pop返回到父组件的时候,只要你在子组件修改了user,那么父组件就修改为子组件操作时候的状态了。
if(this.props.getUser) {
var user = USER_MODELS[this.props.id];
this.props.getUser(user);//就是这里使用了父亲组件传递过来的回调函数
}
网友评论