首先推薦一篇兔兔的文章,寫得還是挺詳細的: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)就好
以上三種方式都可以實現多頁面跳轉,但是有一個問題,就是返還的時候會有閃爍動畫,准確的說他會逐層推出到指定界面,目前正在尋求解決之道。
