1.下载相关依赖包 只有支持IOS
1.yarn add react-native-navigation
2.react-native link
2.使用react-navigation:其中包含:
1、导航栏分类
createStackNavigator: 类似于普通的Navigator,实现不同的页面进行跳转
createTabNavigator: 相当于里面的TabBarController,屏幕上方的标签栏,不同的tabs互相切换。
createDrawerNavigator: 抽屉效果,侧边滑出
3.起步:
yarn add react-navigation
react-native link react-navigation
3.1 配置createStackNavigator
const PersonInfoStack = createStackNavigator({
MyInfoIndex: {
screen: MyInfoScreen,
navigationOptions: {
// header: null
title: '个人',
headerLeft: <View />,
// headerTitle: <Text style={{ flex: 1, textAlign: 'center' }}>自定义Header</Text>,
headerRight: <View />,
headerTitleStyle: {
flex: 1,
textAlign: 'center',
},
headerTintColor: '#fff',
headerStyle: {
backgroundColor:'#4487d6'
},
}
}
});
3.2配置createDrawerNavigator
export const AppStack = createDrawerNavigator({
Tabs: {
screen: TabNavigator,
navigationOptions: {
header: null
}
},
VisitorHistory: {
screen: VisitorHistoryScreen,
navigationOptions: {
header: null
}
},
RecordVisitor: {
screen: RecordVisitorScreen,
navigationOptions: {
header: null
}
/* navigationOptions: ({navigation}) =>{
return ({
title: '增加访客',
headerLeft: function(){
return (
<TouchableOpacity activeOpacity={1} onPress={() =>navigation.goBack()}>
<View style={{display:'flex',flexDirection: 'row',justifyContent: 'center',alignItem: 'center',paddingLeft: 15}}>
<FontAwesome name={'angle-left'} size={30} color={'#fff'} />
<Text style={{color:'#fff',fontSize: 18,paddingTop: 4,paddingLeft: 4}}>返回</Text>
</View>
</TouchableOpacity>
)
},
headerRight: <View />,
headerTitleStyle: {
flex: 1,
textAlign: 'center',
},
headerTintColor: '#fff',
headerStyle: platformContainerStyles
})
} */
/* navigationOptions: {
title: '增加访客',
headerRight: <View />
} */
},
/* AddVisitor: {
screen: AddVisitorScreen,
navigationOptions: {
header: null
}
/!* navigationOptions: ({navigation}) =>{
return ({
title: '信息录入',
headerRight: <View />,
headerLeft: function(){
return (
<TouchableOpacity activeOpacity={1} onPress={() =>navigation.goBack()}>
<View style={{display:'flex',flexDirection: 'row',justifyContent: 'center',alignItem: 'center',paddingLeft: 15}}>
<FontAwesome name={'angle-left'} size={30} color={'#fff'} />
<Text style={{color:'#fff',fontSize: 18,paddingTop: 4,paddingLeft: 4}}>返回</Text>
</View>
</TouchableOpacity>
)
},
headerTitleStyle: {
flex: 1,
textAlign: 'center',
},
headerTintColor: '#fff',
headerStyle: platformContainerStyles
})
} *!/
},*/
EditPeople: {
screen: EditPeopleScreen,
navigationOptions: {
header: null
}
},
ModifyPwd: {
screen: ModifyPwdScreen,
navigationOptions: {
title: '修改密码',
headerRight: <View />
}
},
ModifyPwdSuccess: {
screen: ModifyPwdSuccessScreen,
navigationOptions: {
title: '修改密码',
headerRight: <View />
}
},
Test: {
screen: TestScreen,
navigationOptions: {
header: null,
// title: '测试页面',
// headerRight: <View />
}
},
},
{
animationEnabled:true,
initialRouteName: 'Tabs',
swipeEnabled: true,
lazy: false,
drawerWidth:Dimensions.get('window').width *0.9, // 抽屉宽
drawerPosition: 'right', // 抽屉在左边还是右边
contentComponent: AddVisitorScreen , // 自定义抽屉组件
},
);
export const DrawerNav = createDrawerNavigator({
AppStackPage1: { screen:AddVisitorScreen }
});