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

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

createDrawerNavigator抽屜效果，側邊滑出：

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類型的導航器

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;
  複製代碼

• 2. 經過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>
)
複製代碼

• 你們在學習使用React Navigation3x過程當中遇到任何問題均可以在React Navigation3x的視頻教程中尋找答案哈。
• 另外，也能夠經過最新版React Native+Redux打造高質量上線App視頻教程學習React Navigation開發的更多實戰經驗和技巧，以及優化思路。