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

React · 發表 2019-01-22 00:35:45

摘要： createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig): RouteConfigs DrawerNavigatorConfig 從createDrawerNavigator API上可以看出 createDrawer...

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig):

RouteConfigs
DrawerNavigatorConfig

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

RouteConfigs

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

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

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。

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

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

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的視訊教程，歡迎學習。

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

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的視訊教程，歡迎學習。

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>
}
複製程式碼

程式碼解析：

頁面跳轉可分為兩步：

獲取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>
)
複製程式碼

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

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

您可能也會喜歡…