1、导航栏分类
StackNavigator: 类似于普通的Navigator，实现不同的页面进行跳转
TabNavigator: 相当于里面的TabBarController，屏幕上方的标签栏，不同的tabs互相切换。
DrawerNavigator: 抽屉效果，侧边滑出
正常配置StackNavigator的时候，代码如下
const Stack = StackNavigator({
Main: { screen: Main },
Detail: { screen: Detail }
},
{
initialRouteName:'Main', // 默认显示界面 Index
navigationOptions: {
headerTintColor: '#333',
headerBackTitle: null,
headerStyle: {
backgroundColor: '#fff',
},
headerTitleStyle:{
alignSelf:'center',
},
};
});
正常配置TabNavigator的时候，代码如下
const MainTab = TabNavigator({
Home: {
screen: Home,
navigationOptions:{
tabBarLabel: '首页',
tabBarIcon: ({tintColor}) => (
<Image
source={{uri : '首页'}}
style={[tabBarIcon, {tintColor: tintColor}]}
/>
),
},
},
{
tabBarPosition: 'bottom',//tab底部显示
swipeEnabled:false,// 禁止左右滑动
animationEnabled:false,//禁止动画
tabBarOptions: {
//TabBar样式设置
style: {
height:50,
backgroundColor:'white',// TabBar 背景色
},
//TabBar底部文字设置
labelStyle: {
fontSize: 12,
marginTop:-1,
},
//TabBar底部图片设置
tabBarIconStyle:{
marginTop:-3,
}
activeTintColor:'#bb6b50',// 文字和图片选中颜色
inactiveTintColor:'#333',文字和图片默认颜色
showLabel:false,
}
});
DrawerNavigator实现抽屉导航
const Drawer = DrawerNavigator({
Home: {
screen: Home
},
},
{
drawerWidth: 300, // 展示的宽度
drawerPosition: 'left', // 抽屉在左边还是右边
contentComponent: CustomDrawerContentComponent // 自定义抽屉组件
});
const CustomDrawerContentComponent = props => {
return (
<View style={{flex:1}}>
<TouchableOpacity style={styles.btnStyle}
onPress={() =>props.navigation.navigate("DrawerClose")}>
<Text>首页</Text>
</TouchableOpacity>
</View>
);
}
如果要实现StackNavigator嵌套TabNavigator+ DrawerNavigator，如图效果
QQ20180522-210915-HD.gif
代码如下
TabNavigator配置，看截图
4E416639-09C8-4C2A-951B-CC6DFBC1C39A.png
56620971-9024-4A73-9616-7486449AF2DD.png
代码如下
const MainScreentNavigator=TabNavigator({
Home:{
screen:Home,
navigationOptions:{
tabBarLabel:'首页',
headerTitle:'首页',
tabBarIcon:({tintColor,focused})=>(
<View style={{height:22,width:22,backgroundColor:'red'}}/>
),
}},
Friend:{
screen:Friend,
navigationOptions:{
tabBarLabel:'朋友',
headerTitle:'朋友',
tabBarIcon:({tintColor,focused})=>(
<View style={{height:22,width:22,backgroundColor:'red'}}/>
),
}},
Find:{
screen:Find,
navigationOptions:{
tabBarLabel:'好友',
headerTitle:'好友',
tabBarIcon:({tintColor,focused})=>(
<View style={{height:22,width:22,backgroundColor:'red'}}/>
),
}},
},
{
tabBarPosition: 'bottom',
swipeEnabled: false, // 禁止左右滑动
animationEnabled:false,
tabBarOptions: {
activeTintColor: '#bb6b50', // 文字和图片选中颜色
inactiveTintColor: '#333', // 文字和图片默认颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {
height: 0
}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
style: {
backgroundColor: 'white', // TabBar 背景色
height:50,
},
labelStyle: {
fontSize: 12, // 文字大小
marginTop:-1,
},
tabBarIconStyle:{
marginTop:-3,
}
}
}
);
StackNavigator配置，看截图
71B32CBB-B60C-4C74-B22C-47391A7942AA.png
代码如下
const Stack= StackNavigator({
Home:{
screen:MainScreentNavigator,
},
FirstVC:{
screen:FirstVC,
navigationOptions:close
},
SecondVC:{
screen:SecondVC,
navigationOptions:close
},
ThirdVC:{
screen:ThirdVC,
navigationOptions:close
},
FourVC:{
screen:FourVC,
navigationOptions:close
},
FiveVC:{
screen:FiveVC,
navigationOptions:close
}
}, {
initialRouteName: 'Home',
navigationOptions: {
header: null //隐藏导航栏
}
});
二级页面不需要侧拉出菜单需要加一个close
代码是
const close = {
//禁止打开菜单
drawerLockMode: "locked-closed",
//允许使用返回手势
gesturesEnabled: true,
}
3D8581D9-4A52-41EF-AEFA-B03344F4557A.png
代码如下
export default const Drawer = DrawerNavigator({
Home: {
screen: Stack,
},
}, {
drawerWidth: width - 100, // 展示的宽度
drawerPosition: 'left', // 抽屉在左边还是右边
contentComponent: CustomDrawerContentComponent // 自定义抽屉组件
});
CustomDrawerContentComponent代码
如下
const CustomDrawerContentComponent = props => {
return (
<ScrollView>
<MyNav
color={"#1AA1E5"}
leftIconWidth={11}
leftIconHeight={19}
textColor={"white"}
/>
<View
style={{ backgroundColor: "white", height: height, width: width - 100 }}
>
<TouchableOpacity
style={styles.btnStyle}
onPress={() => props.navigation.navigate("DrawerClose")}
>
<Text>首页</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.btnStyle}
onPress={() => props.navigation.navigate("FirstVC")}
>
<Text>钱包</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.btnStyle}
onPress={() => props.navigation.navigate("SecondVC")}
>
<Text>消息</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.btnStyle}
onPress={() => props.navigation.navigate("ThirdVC")}
>
<Text>redux</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.btnStyle}
onPress={() => props.navigation.navigate("FiveVC")}
>
<Text>商城</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.btnStyle}
onPress={() => props.navigation.navigate("FourVC")}
>
<Text>设置</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.btnStyle}
onPress={() => props.navigation.navigate("FourVC")}
>
<Text>退出登录</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
};
嵌套结构就是这样
