目錄

• 基本使用（此處基本使用僅針對導航頭部而言，不包含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兩個引數，先到這 上個廁所