搭建demo使用相关版本：
"react-native": "0.56.0",
"react-navigation": "^2.18.2"
介绍
打开一个侧边栏，抽屉效果。官网介绍
简单使用 相关介绍都注释在代码里面了
//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 {
//一直在想怎么样实现 抽屉包装一个组件 但是不要在侧边栏存在这个组件的相关显示与响应
//于是在这里对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数组，用于定义抽屉项目的顺序。
initialRouteName: 'Main',//初始路由的routeName。
drawerLockMode: 'locked-open',//设置是否响应手势
//'unlocked' 可以通过手势和代码 打开关闭抽屉
//'locked-closed' 抽屉关闭状态 不能通过手势打开 只能通过代码实现
//'locked-open' 抽屉打开状态 不能通过手势关闭 只能通过代码实现
drawerWidth: 250, //抽屉的宽度或返回的功能。
drawerPosition: 'left', //选项是left或right。默认是left位置。
useNativeAnimations: false, //启用原生动画。默认是true。
drawerBackgroundColor: 'pink', //使用抽屉背景获取某种颜色。默认是white。
//用于呈现抽屉内容的组件，例如导航项。收到navigation抽屉的道具。默认为DrawerItems
//用于自定义
//contentComponent: '',
//配置抽屉内容 items相关
contentOptions: {
// items: [OtherScreen],//可以修改或覆盖路由数组 不知道干嘛用的
// activeItemKey: 'AppInfo', //识别活动路线的关键 也不知道干嘛用的
activeTintColor: 'white', //活动标签的标签和图标颜色
activeBackgroundColor: 'blue', //活动标签的背景颜色
inactiveTintColor: 'black', //非活动标签的标签和图标颜色
inactiveBackgroundColor: 'red', //非活动标签的背景颜色
// //按下项目时要调用的函数 不知道是否使用错误 一直没反应
//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数组，用于定义抽屉项目的顺序。
initialRouteName: 'Main',//初始路由的routeName。
drawerLockMode: 'unlocked',//设置是否响应手势
//'unlocked' 可以通过手势和代码 打开关闭抽屉
//'locked-closed' 抽屉关闭状态 不能通过手势打开 只能通过代码实现
//'locked-open' 抽屉打开状态 不能通过手势关闭 只能通过代码实现
drawerWidth: 250, //抽屉的宽度或返回的功能。
drawerPosition: 'left', //选项是left或right。默认是left位置。
useNativeAnimations: false, //启用原生动画。默认是true。
drawerBackgroundColor: 'pink', //使用抽屉背景获取某种颜色。默认是white。
//用于呈现抽屉内容的组件，例如导航项。收到navigation抽屉的道具。默认为DrawerItems
//用于自定义
contentComponent: CustomDrawerContentComponent,
})
