『React Navigation 3x系列教程』createBottomTabNavigator開發指南

weixin_34007291發表於2018-12-30
904056-ed4a2b71dbd926a0
createBottomTabNavigator開發指南

期待已久的新教程上線啦!解鎖React Native開發新姿勢,一網打盡React Native最新與最熱技術,點我Get!!!

createBottomTabNavigator相當於iOS裡面的TabBarController,螢幕下方的標籤欄。如圖:

904056-9a04538babe37b5d.png
createBottomTabNavigator.png

createBottomTabNavigator API

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):

  • RouteConfigs(必選):路由配置物件是從路由名稱到路由配置的對映,告訴導航器該路由呈現什麼。
  • BottomTabNavigatorConfig(可選):配置導航器的路由(如:預設首屏,navigationOptions,paths等)樣式(如,轉場模式mode、頭部模式等)。

從createBottomTabNavigator API上可以看出createBottomTabNavigator支援通過RouteConfigsBottomTabNavigatorConfig兩個引數來建立createBottomTabNavigator導航器。

RouteConfigs

RouteConfigs支援三個引數screenpath以及navigationOptions

  • screen(必選):指定一個 React 元件作為螢幕的主要顯示內容,當這個元件被TabNavigator載入時,它會被分配一個navigation prop。
  • path(可選):用來設定支援schema跳轉時使用,具體使用會在下文的有關Schema章節中講到;
  • navigationOptions(可選):用以配置全域性的螢幕導航選項如:title、headerRight、headerLeft等;

提示:和本文配套的還有一個React Navigation3x的視訊教程,歡迎學習。

BottomTabNavigatorConfig

  • tabBarComponent:指定createBottomTabNavigator的TabBar元件,如果不指定在iOS上預設使用TabBarBottom,在Android平臺上預設使用TabBarTop
    • TabBarBottomTabBarTop都是react-navigation所支援的元件,要自定義TabBar可以重寫這兩個元件也可以根據需要自己實現一個;
  • tabBarOptions: 配置TaBar下文會詳細講解;
  • initialRouteName : 預設頁面元件,createBottomTabNavigator顯示的第一個頁面;
  • order: 定義tab順序的routeNames陣列。
  • paths: 提供routeName到path config的對映,它覆蓋routeConfigs中設定的路徑。
  • backBehavior: 後退按鈕是否會導致標籤切換到初始tab? 如果是,則設切換到初始tab,否則什麼也不做。 預設為切換到初始tab。

tabBarOptions(tab配置)

  • activeTintColor: 設定TabBar選中狀態下的標籤和圖示的顏色;
  • inactiveTintColor: 設定TabBar非選中狀態下的標籤和圖示的顏色;
  • showIcon: 是否展示圖示,預設是false;
  • showLabel: 是否展示標籤,預設是true;
  • upperCaseLabel - 是否使標籤大寫,預設為true。
  • tabStyle: 設定單個tab的樣式;
  • indicatorStyle: 設定 indicator(tab下面的那條線)的樣式;
  • labelStyle: 設定TabBar標籤的樣式;
  • iconStyle: 設定圖示的樣式;
  • style: 設定整個TabBar的樣式;
  • allowFontScaling: 設定TabBar標籤是否支援縮放,預設支援;
  • safeAreaInset:覆蓋<SafeAreaView>的forceInset prop,預設是{ bottom: 'always', top: 'never' },可選值:top | bottom | left | right ('always' | 'never');

eg:

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    backgroundColor: 'blue',
  },
}

提示:和本文配套的還有一個React Navigation3x的視訊教程,歡迎學習。

navigationOptions(螢幕導航選項)

createBottomTabNavigator支援的螢幕導航選項的引數有:

  • title: 可以用作headerTitle和tabBarLabel的備選的通用標題。
  • tabBarVisible: 顯示或隱藏TabBar,預設顯示;
  • tabBarIcon: 設定TabBar的圖示;
  • tabBarLabel: 設定TabBar的標籤;
  • tabBarOnPress: Tab被點選的回撥函式,它的引數是一保函一下變數的物件:
    • navigation: navigation prop ;
    • defaultHandler: tab按下的預設處理程式;
  • tabBarButtonComponent:React元件,它包裝圖示和標籤並實現onPress。 預設情況下是TouchableWithoutFeedback的一個封裝,使其其表現與其它可點選元件相同,tabBarButtonComponent: TouchableOpacity 將使用 TouchableOpacity 來替代;
  • tabBarAccessibilityLabel:選項卡按鈕的輔助功能標籤。 當使用者點選標籤時,螢幕閱讀器會讀取這些資訊。 如果您沒有選項卡的標籤,建議設定此項;
  • tabBarTestID:用於在測試中找到該選項卡按鈕的 ID;

提示:和本文配套的還有一個React Navigation3x的視訊教程,歡迎學習。

【案例1】使用createBottomTabNavigator做介面導航、配置navigationOptions

904056-89fb1d79165e72c6.gif
createBottomTabNavigator

第一步:建立一個createBottomTabNavigator型別的導航器

export const AppTabNavigator = createBottomTabNavigator({
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: 'Page1',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: 'Page2',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-people' : 'ios-people-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: 'Page3',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
}, {
    tabBarComponent: TabBarComponent,
    tabBarOptions: {
        activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
    }
});

提示:和本文配套的還有一個React Navigation3x的視訊教程,歡迎學習。

第二步:配置navigationOptions:

TabNavigator的navigationOptions有兩個關鍵的屬性,tabBarLabel標籤與tabBarIcon圖示:

Page2: {
    screen: Page2,
    navigationOptions: {
        tabBarLabel: 'Page2',
        tabBarIcon: ({tintColor, focused}) => (
            <Ionicons
                name={focused ? 'ios-people' : 'ios-people-outline'}
                size={26}
                style={{color: tintColor}}
            />
        ),
    }
},

在上述程式碼中使用了react-native-vector-icons的向量圖示作為Tab的顯示圖示,tabBarIcon接收一個React 元件,大家可以根據需要進行定製:

  • tintColor: 當前狀態下Tab的顏色;
  • focused: Tab是否被選中;

提示:和本文配套的還有一個React Navigation3x的視訊教程,歡迎學習。

第三步:介面跳轉

 const {navigation} = this.props;
 ...
 <Button
    title="跳轉到頁面2"
    onPress={() => {
        navigation.navigate("Page3",{ name: 'Devio' })
    }}
/>
 <Button
    title="Go Back"
    onPress={() => {
        navigation.goBack();
    }}
/>

程式碼解析:

頁面跳轉可分為兩步:

    1. 獲取navigation:
    const {navigation} = this.props;
    
    1. 通過navigate(routeName, params, action)進行頁面跳轉:
     navigation.navigate('Page2');
     navigation.navigate('Page3',{ name: 'Devio' });
    

    這裡在跳轉到Page3的時候傳遞了引數{ name: 'Devio' }

提示:和本文配套的還有一個React Navigation3x的視訊教程,歡迎學習。

第四步:更新頁面Params與返回

export default class Page1 extends React.Component {
    //也可在這裡定義每個頁面的導航屬性,這裡的定義會覆蓋掉別處的定義
    // static navigationOptions = {
    //     title: 'Page1',
    // };

    render() {
        const {navigation} = this.props;
        return <View style={{flex: 1, backgroundColor: "gray",}}>
            <Text style={styles.text}>歡迎來到Page1</Text>
            <Button
                title="Go Back"
                onPress={() => {
                    navigation.goBack();
                }}
            />
            <Button
                title="改變主題色"
                onPress={() => {
                    navigation.setParams({theme:{
                        tintColor:'orange',
                        updateTime:new Date().getTime()
                    }})
                }}
            />
            <Button
                title="跳轉到頁面2"
                onPress={() => {
                    navigation.navigate("Page2")
                }}
            />
        </View>
    }
}

程式碼解析:

在上述程式碼中通過:

<Button
    title="改變主題色"
    onPress={() => {
        navigation.setParams({theme:{
            tintColor:'orange',
            updateTime:new Date().getTime()
        }})
    }}
/>

更新當前主題,你會看到當點選“改變主題色“按鈕時,TabBar的顏色也會跟著改變。

當使用者單擊Go Back按鈕時,通過:

navigation.goBack();

實現了返回到預設的Tab。

提示:和本文配套的還有一個React Navigation3x的視訊教程,歡迎學習。

【高階案例】react-navigation的高階應用

在使用react-navigation時往往有些需求通過簡單的配置是無法完成的,比如:

  • 動態配置createBottomTabNavigator:官方只提供了TabNavigator中的頁面的靜態配置方式,如果TabNavigator中的頁面不固定,需要動態生成那麼需要怎麼做呢?
  • 動態配置createBottomTabNavigator的樣式:通過官方的文件是無法實現動態改變TabNavigator的樣式的,比如:修改顯示的文字,修改字型顏色,修改圖示等等;
  • 多層巢狀後路由個性化定製:createBottomTabNavigator被包裹後在TabNavigator中的頁面是無法藉助navigation跳轉到外層StackNavigator中的頁面的,這種應用場景很多,尤其是你需要定製TabNavigator的時候;
  • 初始化傳參:如何在設定頁面的時候傳遞引數呢?

類似上述的應用場景有很多,大家可以通過與本教程配套的最新版React Native+Redux打造高質量上線App視訊教程進行進一步學習react-navigation的更多高階應用

相關文章