這篇文章要跟大家分享的內容是關於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'
}
)登入後複製
相關推薦：
React中動畫不生效的原因分析
以上是react-navigation在開發中的使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
