首頁 > 文章 > web前端 > react-navigation在開發中的使用介紹

react-navigation在開發中的使用介紹

不言原創: 2018-07-23 11:40:2311152瀏覽

這篇文章要跟大家分享的內容是關於react-navigation在開發中的使用介紹，有一定的參考價值，有需要的朋友可以參考一下。

日常廢話

react-navigation是一個來自react社群的導覽解決方案。以我一個月資深的react開發經驗來看，說是react-native開發app必備庫之一毫不過分。

在開發過程中，不同頁面因為不同的業務需求會有不同的頭部(header)，這篇文章針對幾種常用我遇到過的各種header提供對應的react-navigation解。

我是正文

底部tab對app來說是十分常見的需求。 react-navigation也提供了對應的API來建立底部tab：createBottomTabNavigator

如何自訂tab頁的header呢？我們分情況討論：

所有tab頁都要header

很簡單，不需要額外的設定。

所有tab頁都不要header

第一時間可能會想到的是在createBottomTabNavigator中對每個頁面的navigationOptions物件設定header為null。

createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        header: null // 无效！！
      }
    }
  }
)

但實際上createBottomTabNavigator中的navigationOptions物件是不接受header參數的，至少在文件中沒寫。官方文件

解決方式：在根級導航中設定。

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator, // TabNavigator就是通过createBottomTabNavigator创建的底部导航
      navigationOptions: {
        header: null
      }
    }
    // other pages
  }
)

只有某個tab要header

其實navigator是可以互相嵌套的。就像上面的例子中，Main路由的頁面是createBottomTabNavigator建立的底部導覽。同理，底部導覽中某個tab的頁面也可以是導覽頁。有點繞，還是看程式碼

const bottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        // some options
      }
    },
    User: { // user页要"头"~
      screen: createStackNavigator(
        User: {
          screen: User,
          navigationOptions: {
            header: customHeader
          }
        }
      )
    }
  }
)

const appNavigator = createStackNavigator(
  {
    Main: {
      screen: bottomTabNavigator,
      navigationOptions: {
        header: null // 这里要将bottomTabNavigator的header设为null
      }
    },
    Other: {
      screen: Other
    }
  }
)

因為預設情況下bottomTabNavigator會有一個自己的header，而user我們又建立了一個帶有header的路由頁面，所以我們將Main路由（ bottomTabNavigato）的header設為null，如果不設定的，頁面會有2個header哦，小夥伴可自行嘗試。

某tab頁不要header or 需要自訂header

如果我只有某個tab頁不要header，咋辦？
還是從navigationOptions入手，navigationPptions屬性可以是一個接受navigation對象，傳回一個新物件的函數。

關於navigation對象，可以看官方文檔

這裡我們用到了該物件的state屬性。

現在我們有以下導航配置：

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: '首页'
      }
    },
    Phone: {
      screen: createStackNavigator(
        {
          Phone: {
            screen: Phone,
            navigationOptions: ({ navigation }) => (
              { // phoneHeader为自定义React组件
                header: <PhoneHeader navigation={navigation}/>
              }
            )
          }
        }
      ),
      navigationOptions: {
        tabBarVisible: false,
        title: '机型'
      }
    },
    User: {
      screen: User,
      navigationOptions: {
        title: '我的'
      }
    }
  }
)

上面程式碼建立了包含3個tab的底部導航，其中phone的header是客製化的。接下去我們要做的是配置在appNavigator中配置TabNavigator的navigation屬性，根據不同的路由使用不同的header(即當處在home頁或是user頁時候，使用預設的header，當處在phone頁面時，移除header。

為什麼是移除header?

##因為phone頁面已經自訂了header，我們只需移除外層TabNavigator的header即可。如果不然，會有2個header（TabNavigator和phone2個header）。這個上面已經提到。另外，也可以將定制的header配置在

appNavigator中TabNavigator的navigation屬性裡。（未驗證，可自行嘗試。）

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator,
      navigationOptions: ({ navigation }) => {
        const titleMap = {
          Home: '首页',
          User: '我的'
        }
        // 根据路由的顺序以及路由名定义title
        const result = {
          title: titleMap[navigation.state.routes[navigation.state.index].routeName],
          headerTitleStyle: {
            fontWeight: '600',
            color: color.gray_1,
            fontSize: px2p(18)
          },
          headerBackTitle: null
        }
        // 在配置TabNavigator时，phone页面是第一个定义的(zero-indexed)。
        // 所以当index为1的时，header设为null
        // 或者将header设为自定义header，对应修改TabNavigator中phone。
        if (navigation.state.index === 1) { 
          result.header = null
          result.headerTransparent = true
        }
        return result
      }
    },
    ...pages // 其他页面
  },
  {
    initialRouteName: 'Main'
  }
)