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

CrazyCodeBoy發表於2019-01-21
ReactNavigation

這篇文章將向大家分享createDrawerNavigator的一些開發指南和實用技巧。

createDrawerNavigator抽屜效果，側邊滑出：

createDrawerNavigator.png

createDrawerNavigator API

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig):

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

從createDrawerNavigator API上可以看出createDrawerNavigator支援通過RouteConfigs和 DrawerNavigatorConfig兩個引數來建立createDrawerNavigator導航器。

RouteConfigs

RouteConfigs支援三個引數screen、path以及navigationOptions；

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

DrawerNavigatorConfig

  • drawerWidth: 設定側邊選單的寬度；

  • drawerPosition: 設定側邊選單的位置，支援'left'、 'right'，預設是'left'；

  • contentComponent: 用於呈現抽屜導航器內容的元件，例如導航項。接收抽屜導航器的 navigation 屬性 。預設為DrawerItems。有關詳細資訊，請參閱下文；

  • contentOptions: 配置抽屜導航器內容，見下文;

  • useNativeAnimations: 是否啟用Native動畫，預設啟用；

  • drawerBackgroundColor: 側邊選單的背景；

  • initialRouteName: 初始化哪個介面為根介面，如果不配置，預設使用RouteConfigs中的第一個頁面當做根介面；

  • order: drawer排序，預設使用配置路由的順序；

  • paths: 提供routeName到path config的對映，它覆蓋routeConfigs中設定的路徑。

  • backBehavior: 後退按鈕是否會導致標籤切換到初始drawer？ 如果是，則設切換到初始drawer，否則什麼也不做。 預設為切換到初始drawer。

自定義側邊欄(contentComponent)

DrawerNavigator有個預設的帶滾動的側邊欄，你也可以通過重寫這個側邊欄元件來自定義側邊欄：

contentComponent:(props) => (
    <ScrollView style={{backgroundColor:'#987656',flex:1}}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
        </SafeAreaView>
    </ScrollView>
)
複製程式碼

DrawerItems的contentOptions

contentOptions主要配置側滑欄item的屬性，只對DrawerItems，例如我們剛才寫的例子，就可以通過這個屬性來配置顏色，背景色等。其主要屬性有：

  • items: 路由陣列，如果要修改路由可以可以修改或覆蓋它；
  • activeItemKey: 定義當前選中的頁面的key；
  • activeTintColor: 選中item狀態的文字顏色；
  • activeBackgroundColor: 選中item的背景色；
  • inactiveTintColor: 未選中item狀態的文字顏色；
  • inactiveBackgroundColor: 未選中item的背景色；
  • onItemPress: 選中item的回撥，這個引數屬性為函式，會將當前路由回撥過去；
  • itemsContainerStyle: 定義itemitem容器的樣式；
  • itemStyle: 定義item的樣式；
  • labelStyle: 定義item文字的樣式；
  • iconContainerStyle: 定義item圖示容器的樣式；
  • activeLabelStyle：選中狀態下文字樣式；
  • inactiveLabelStyle：非選中狀態下文字樣式；
  • iconContainerStyle ：用於設定圖示容器的樣式。

eg:

contentOptions: {
  activeTintColor: '#e91e63',
  itemsContainerStyle: {
    marginVertical: 0,
  },
  iconContainerStyle: {
    opacity: 1
  }
}
複製程式碼

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

navigationOptions（螢幕導航選項）

DrawerNavigator支援的螢幕導航選項的引數有：

  • title: 可以用作headerTitle和drawerLabel的備選的通用標題。
  • drawerLabel：側滑標題；
  • drawerIcon：側滑的標題圖示，這裡會回傳兩個引數：
    • {focused: boolean, tintColor: string}：
      • focused: 表示是否是選中狀態；
      • tintColor: 表示選中的顏色；
  • drawerLockMode：指定抽屜的鎖定模式。 這也可以通過在頂級路由器上使用screenProps.drawerLockMode 動態更新。

側邊欄操作(開啟、關閉、切換)

側邊欄支援以下幾種操作方式：

navigation.openDrawer();
navigation.closeDrawer();
navigation.toggleDrawer();
//或
navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());
複製程式碼

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

其中路由名openDrawer對應這開啟側邊欄的操作，DrawerClose對應關閉側邊欄的操作，toggleDrawer對應切換側邊欄操作，要進行這些操作我麼還需要一個navigation，navigation可以從props中獲取；

  • 開啟側邊欄：navigation.openDrawer();；
  • 關閉側邊欄：navigation.closeDrawer();；
  • 切換側邊欄：navigation.toggleDrawer();；

其他API

【案例1】使用DrawerNavigator做介面導航、配置navigationOptions、自定義側邊欄

createDrawerNavigator

第一步：建立一個createDrawerNavigator型別的導航器

export const DrawerNav = createDrawerNavigator({
        Page4: {
            screen: Page4,
            navigationOptions: {
                drawerLabel: 'Page4',
                drawerIcon: ({tintColor}) => (
                    <MaterialIcons name="drafts" size={24} style={{color: tintColor}}/>
                ),
            }
        },
        Page5: {
            screen: Page5,
            navigationOptions: {
                drawerLabel: 'Page5',
                drawerIcon: ({tintColor}) => (
                    <MaterialIcons
                        name="move-to-inbox"
                        size={24}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
    },
    {
        initialRouteName: 'Page4',
        contentOptions: {
            activeTintColor: '#e91e63',
        },
        contentComponent:(props) => (
            <ScrollView style={{backgroundColor:'#987656',flex:1}}>
                <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                    <DrawerItems {...props} />
                </SafeAreaView>
            </ScrollView>
        )
    }
);
複製程式碼

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

第二步：配置navigationOptions：

DrawerNavigator的navigationOptions有兩個關鍵的屬性，tabBarLabel標籤與tabBarIcon圖示：

Page4: {
    screen: Page4,
    navigationOptions: {
        drawerLabel: 'Page4',
        drawerIcon: ({tintColor}) => (
            <MaterialIcons name="drafts" size={24} style={{color: tintColor}}/>
        ),
    }
},
複製程式碼

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

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

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

第三步：介面跳轉

render() {
    const {navigation} = this.props;
    return <View style={{flex: 1, backgroundColor: "#f67888",}}>
        <Text style={styles.text}>歡迎來到Page5</Text>
        <Button
            onPress={() => navigation.openDrawer()}
            title="Open drawer"
        />
        <Button
            onPress={() => navigation.toggleDrawer()}
            title="Toggle drawer"
        />
        <Button
            onPress={() => navigation.navigate('Page4')}
            title="Go to Page4"
        />
    </View>
}
複製程式碼

程式碼解析：

頁面跳轉可分為兩步：

    1. 獲取navigation：
    const {navigation} = this.props;
複製程式碼
    1. 通過navigate(routeName, params, action)進行頁面跳轉：
	 navigation.navigate('Page5');
 });
複製程式碼

自定義側邊欄

如果DrawerNavigator的側邊欄的效果無法滿足我們的需求，我們可以通過contentComponent屬性來自定義側邊欄：

contentComponent:(props) => (
    <ScrollView style={{backgroundColor:'#987656',flex:1}}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
        </SafeAreaView>
    </ScrollView>
)
複製程式碼

相關文章