首先推荐一篇兔兔的文章,写得还是挺详细的: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)就好
以上三种方式都可以实现多页面跳转,但是有一个问题,就是返还的时候会有闪烁动画,准确的说他会逐层推出到指定界面,目前正在寻求解决之道。