react-navigation 使用筆記 持續更新中

目錄

• 基本使用（此處基本使用僅針對導航頭部而言，不包含tabbar等）
• header怎麼和app中通訊呢？

React-Navigation是目前React-Native官方推薦的導航組件，代替了原用的Navigator。最近開始接觸，作個筆記

---

基本使用（此處基本使用僅針對導航頭部而言，不包含tabbar等）

基礎使用主要包括兩部分

組件引入與定義路由

組件引入後，能夠經過提供的api createStackNavigator來建立路由，每一個路由元素都是一個對象

import { createStackNavigator } from 'react-navigation';
export default createStackNavigator({
  Home: {
    screen: App
  },
  Demos: {
    screen: demo
  },
  DebugList: DebugList,
  DebugDetail: DebugDetail
})

自定義header內容

在每一個具體的頁面中，能夠經過設置navigationOptions對象來對header進行必定程度的自定義

static navigationOptions={
  headerTintColor:'#000',
  headerTitle: (
    <Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18)}}>調試demo</Text>
  ),
  headerRight: <View/>
};
--or--
static navigationOptions = ({ navigation, screenProps }) => {
  return {
    headerTintColor:'#000',
    headerTitle: (
      <Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18) }}>網絡日誌</Text>
    ),
    // 這裏之因此要判斷 是由於在生命週期最開始的時候 這個params咱們還沒給他綁定點擊事件
    headerRight: <View><Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}>清空</Text></View>
  }
}

能夠經過對象或者函數兩種形式進行定義，函數定義時自帶兩個參數navigation和screenProps。其中navigation主要是路由傳參內容，screenProps主要是在定義router的時候帶着的參數，一會再把navigationOptions的具體屬性補充一下TODO

header怎麼和app中通訊呢？

小白踩坑後知道navigationOptions中是不能直接訪問reactComponent中的this對象的，所以也就不能直接和reactComponent進行通訊，這個時候怎麼辦呢？答案就是操做navigation對象，咱們能夠經過在組件中從新定義navigation參數params的形式來處理，好比

static navigationOptions = ({ navigation, screenProps }) => {
  return {
    headerTintColor:'#000',
    headerTitle: (
      <Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18) }}>網絡日誌</Text>
    ),
    // 這裏之因此要判斷 是由於在生命週期最開始的時候 這個params咱們還沒給他綁定點擊事件
    headerRight: <View><Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}>清空</Text></View>
  }
}
componentDidMount() {
  this.props.navigation.setParams({
    navigatePress:this._clearStorage
  })
}
_clearStorage = () => {
  global.storage.remove({
    key:'netLog'
  }).then((logs) => {
    console.log('data removed')
    this.setState(previousState => {
      return {
        logList: []
      }
    })
  })
}

而在組件中去調用頭部的內容時，也是主要去查詢navigation這個對象中的state和params兩個參數，先到這 上個廁所