关于react-navigation的学习总结 - 幺宝她爸屌丝逆袭
关于react-navigation的学习总结
首先推荐一篇兔兔的文章，写得还是挺详细的：react-navigation详解。
然后说下自己的心得吧。
1.返回按钮的定制-目前我觉得比较方便的就是直接自定义左按钮来充当返回按钮，里面调goBack()方法就可以，效果杠杠的，最重要的是我想怎么定制怎么定制，这才是关键。
说到这里了多说两句，在react-navigation框架中定制头部的方法如下：
static navigationOptions = ({navigation})=>({
// head导航栏
title:\'首页\',
headerTintColor:\'green\',// 导航栏文字颜色
headerStyle:{
backgroundColor:\'white\', //导航条背景颜色
},
headerBackTitle:\'返回\',//返回按钮的值
headerLeft:(<TouchableOpacity onPress={()=>{
{/* navigation.navigate(\'CallScreen\',{goback:this.gobackaction()}) */}
navigation.navigate(\'CallScreen\',{mainkey:navigation.state.key,callback:\'123\',into:\'456\',lcback:(data)=>{
//这里是回调
}})
}}>
<Text style={{backgroundColor:\'white\',fontSize:18,right:30,color:\'red\'}}>跳转</Text>
</TouchableOpacity>),
})
上面headerBackTitle是默认的返回按钮文字设定，底色好像只能是蓝色，目前没找到方法改。然后headerLeft就是左按钮的定制，这里你就可以随意发挥了，还有一点static里面不能调用this，所以你要是需要相应的参数你就在上面第一行设置，如上navigation（这里让我纠结了很久，归根结底还是语法不熟悉吧，慢慢做项目，慢慢摸索）。
2.多页跳转返回指定页面，可以参看这篇文章。我是在这里找到了实用的解决方案。
a.返回指定页面
先说下我的理解，在navigation下的页面，都有一个属性key，它作为了这个页面的唯一标记，我们需要把这个key存留下来传给你需要返回过来的界面，换句话说你哪个界面需要返回到当前界面，你就需要把当前界面的key传到返回过来的界面。然后，看代码吧。
第一个界面的点击触发：
<TouchableOpacity onPress={()=>{
this.props.navigation.navigate(\'SecondScreen\')
}}>
<Text style={styles.title}>第一个界面</Text>
</TouchableOpacity>
第二个界面的点击触发
const {state} = this.props.navigation; //拿到state
<TouchableOpacity onPress={()=>{
this.props.navigation.navigate(\'ThirdScreen\',{firstkey: state.key})
}}>
<Text>第二个界面</Text>
</TouchableOpacity>
第三个界面的触发：
· const {state} = this.props.navigation; //拿到state
<TouchableOpacity onPress={()=>{
this.props.navigation.navigate(\'ThirdScreen\',{Fkey: state.firstkey,Skey:state.key})
}}>
<Text>第三个个界面</Text>
</TouchableOpacity>\
第4个界面触发
const { state, goBack } = this.props.navigation;
const params = state.params || {};
<TouchableOpacity onPress={()=>{
goBack(params.Fkey); //这里带入的第一个界面的key，所以会返回第一个界面
}}>
<Text>第4个界面</Text>
</TouchableOpacity>
b.还有一个回到首页的方法
利用reset方法
//个人理解相当于ios中切换根控制器，其实是把栈里面的组件全部推出了
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: \'root_tabNavigator\'}),
]
})
this.props.navigation.dispatch(resetAction)
c.创建一个单例，保存第一个页面的key，要在第二个页面利用state.key获取保存，然后goback（对应的key）就好
以上三种方式都可以实现多页面跳转，但是有一个问题，就是返还的时候会有闪烁动画，准确的说他会逐层推出到指定界面，目前正在寻求解决之道。
posted on
2017-09-14 13:30
幺宝她爸屌丝逆袭
阅读(2014)
评论(0)
编辑
收藏
举报
以上是 关于react-navigation的学习总结 - 幺宝她爸屌丝逆袭 的全部内容， 来源链接： utcz.com/z/382771.html
