1抵蚊、導航欄分類
StackNavigator: 類似于普通的Navigator扣典，實現(xiàn)不同的頁面進行跳轉
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實現(xiàn)抽屜導航
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>
);
}
如果要實現(xiàn)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>
);
};
嵌套結構就是這樣
