搭建demo使用相關版本：
"react-native": "0.56.0",
"react-navigation": "^2.18.2"
介紹
打開一個側邊欄，抽屜效果。官網(wǎng)介紹
簡單使用 相關介紹都注釋在代碼里面了
//createDrawerNavigator
import React from 'react';
import {
StyleSheet,
View,
Button,
Text,
Image
} from 'react-native';
import {createDrawerNavigator} from 'react-navigation';
class AppInfoScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'appInfoPage',
drawerIcon: ({tintColor}) => (
<Image
source={require('./image/homeH.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>APP 信息展示頁</Text>
</View>
);
}
}
class Setting extends React.Component {
static navigationOptions = {
drawerLabel: 'setting',
drawerIcon: ({tintColor}) => (
<Image
source={require('./image/RecordH.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<Button
style={styles.btn}
title={'側欄'}
onPress={() => {
this.props.navigation.openDrawer();
}}
/>
<Text style={styles.text}>設置頁</Text>
</View>
);
}
}
class MainScreen extends React.Component {
//一直在想怎么樣實現(xiàn) 抽屜包裝一個組件 但是不要在側邊欄存在這個組件的相關顯示與響應
//于是在這里對drawerLabel給了一個View 并且將它隱藏了
//運行起來的結果看起來還不錯 沒有顯示 也沒有交互
static navigationOptions = {
drawerLabel: () => (
<View style={{opacity: 0}}>
</View>
),
};
render() {
return (
<View style={styles.container}>
<Button
style={styles.btn}
title={'側欄'}
onPress={() => {
this.props.navigation.openDrawer();
}}
/>
<Text style={styles.text}>首頁 進行信息展示</Text>
</View>
);
}
}
//this.props.navigation.openDrawer();//打開抽屜
//this.props.navigation.closeDrawer();//關閉抽屜
export default createDrawerNavigator({
AppInfo: {
screen: AppInfoScreen
},
Main: {
screen: MainScreen
},
Set: {
screen: Setting
},
}, {
order: ['AppInfo', 'Set', 'Main'],//routeNames數(shù)組，用于定義抽屜項目的順序。
initialRouteName: 'Main',//初始路由的routeName。
drawerLockMode: 'locked-open',//設置是否響應手勢
//'unlocked' 可以通過手勢和代碼 打開關閉抽屜
//'locked-closed' 抽屜關閉狀態(tài) 不能通過手勢打開 只能通過代碼實現(xiàn)
//'locked-open' 抽屜打開狀態(tài) 不能通過手勢關閉 只能通過代碼實現(xiàn)
drawerWidth: 250, //抽屜的寬度或返回的功能。
drawerPosition: 'left', //選項是left或right。默認是left位置。
useNativeAnimations: false, //啟用原生動畫。默認是true。
drawerBackgroundColor: 'pink', //使用抽屜背景獲取某種顏色。默認是white。
//用于呈現(xiàn)抽屜內容的組件，例如導航項。收到navigation抽屜的道具。默認為DrawerItems
//用于自定義
//contentComponent: '',
//配置抽屜內容 items相關
contentOptions: {
// items: [OtherScreen],//可以修改或覆蓋路由數(shù)組 不知道干嘛用的
// activeItemKey: 'AppInfo', //識別活動路線的關鍵 也不知道干嘛用的
activeTintColor: 'white', //活動標簽的標簽和圖標顏色
activeBackgroundColor: 'blue', //活動標簽的背景顏色
inactiveTintColor: 'black', //非活動標簽的標簽和圖標顏色
inactiveBackgroundColor: 'red', //非活動標簽的背景顏色
// //按下項目時要調用的函數(shù) 不知道是否使用錯誤 一直沒反應
//github上面有答案 在自定義視圖的時候 會有用
// onItemPress(route) {
// console.log('onItemPress'+route);
// },
// itemsContainerStyle: '', //內容部分的樣式對象
// itemStyle: '', //單個項目的樣式對象，可以包含圖標和 / 或標簽
// labelStyle: '', //Text當標簽是字符串時，樣式對象在內容部分內覆蓋樣式
// activeLabelStyle: '', //Text當標簽是字符串（與之合并labelStyle）時，樣式對象覆蓋活動標簽的樣式
// inactiveLabelStyle: '', //Text當標簽是字符串（與之合并labelStyle）時，樣式對象覆蓋非活動標簽的樣式
// iconContainerStyle: '', //樣式對象以覆蓋View圖標容器樣式。
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: 'red',
backgroundColor: 'pink',
fontSize: 15,
},
btn: {
backgroundColor: 'red',
color: 'blue',
width: 60,
height: 44,
marginTop: 115,
marginLeft: 100
},
icon: {
width: 22,
height: 22
}
})
側邊欄的自定義 對比上面一段添加相關代碼
const CustomDrawerContentComponent = (props) => (
<ScrollView>
<SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
<View style={{width:200,height:100,backgroundColor:'red'}}></View>
</SafeAreaView>
</ScrollView>
);
export default createDrawerNavigator({
AppInfo: {
screen: AppInfoScreen
},
Main: {
screen: MainScreen
},
Set: {
screen: Setting
},
}, {
order: ['AppInfo', 'Set', 'Main'],//routeNames數(shù)組，用于定義抽屜項目的順序。
initialRouteName: 'Main',//初始路由的routeName。
drawerLockMode: 'unlocked',//設置是否響應手勢
//'unlocked' 可以通過手勢和代碼 打開關閉抽屜
//'locked-closed' 抽屜關閉狀態(tài) 不能通過手勢打開 只能通過代碼實現(xiàn)
//'locked-open' 抽屜打開狀態(tài) 不能通過手勢關閉 只能通過代碼實現(xiàn)
drawerWidth: 250, //抽屜的寬度或返回的功能。
drawerPosition: 'left', //選項是left或right。默認是left位置。
useNativeAnimations: false, //啟用原生動畫。默認是true。
drawerBackgroundColor: 'pink', //使用抽屜背景獲取某種顏色。默認是white。
//用于呈現(xiàn)抽屜內容的組件，例如導航項。收到navigation抽屜的道具。默認為DrawerItems
//用于自定義
contentComponent: CustomDrawerContentComponent,
})
