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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM