1.react-navigation安装:
安装:npm i react-navigation --save
中文社区:https://reactnative.cn/docs/0.51/navigation.html#content
react navigation:官方文档:https://reactnavigation.org/
2.navigation&tab bar整合:
原理分析:首先无论tab bar还是navigation bar本质都是navigation,而RN与ios原生不同的是,它只有通过导航器来实现页面的跳转,区别于IOS有两种方式:push(针对navigation),present(一般跳转).而RN通过导航器跳转都会默认自带导航栏(可以手动通过UI隐藏,但是没有一般跳转).
一般操作:参考:https://www.jianshu.com/p/93d7838701db
里面有些方法已经过期:需要换成:
import {
createStackNavigator,
// TabNavigator,
createBottomTabNavigator,
} from 'react-navigation';
const MainScreentNavigator = createBottomTabNavigator({
const MyNavigatior = createStackNavigator({
然后把MyNavigatior注册成为组件,通过index.js入口进入.
AppRegistry.registerComponent('xxxx', () => MyNavigatior);一般混合栈的逻辑是:tab stack<---in--navigation stack<--in---screen
3.StackNavigation:
这个是顶部的导航栏,形式如下:
const MainStack = createStackNavigator({
Home: { screen: HomeScreen },//展示的第一个页面
BookVC: { screen: BookVC },
});首先引入页面:(页面要继承React.Component并且export才可以引入)
import HomeScreen from './HomeScreen';
import BookVC from './BookVC';
***刚开始踩坑,以为screen里面只能装组件,不能装navigation.其实不是的,报的object未定义的错,其实是js编译时从上到下,前面的stack调用了后面才定义的stack才会报错,只要把需要用到的stack放在前面定义即可.
这里有一个很容易混淆的问题:
BookVC: { screen: BookVC },screen表示显示的页面,这容易理解.前面BookVC很容易出错.首先这里和tab bar不同,不能随便命名.一般使用的是你import进来的页面的命名import BookVC from './BookVC';如果另外命名,会跳转失效.
4.Tab bar(createBottomTabNavigator):
export const TabNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen},//第一个tab
Book: { screen: BookStack},
Mybook: {screen: MemberStack},
Member: {screen: MemberStack},
Record: {screen: RecordStack}
});Home: { screen: HomeScreen} Home就是tab的UI名称,同时也是tab stack的index,后面有用.
可以看到上面的tab stack除了Home,里面都装了navigation stack,那么效就是每一个tab里面的页面都可以通过导航器跳转了.
5.navigationOptions:
如果想隐藏导航栏,怎么做呢.两种方法:
一.在建栈的时候就通过如下方式:
const MemberStack = createStackNavigator({
Member: {screen: MemberScreen},
UpdateMemberScreeen: {screen: UpdateMemberScreeen, navigationOptions:{header: null}},
});二.在类内:
export default class UpdateMemberScreeen extends React.Component {
static navigationOptions = { header: null }
如果想隐藏tab bar呢.同理:
一.在建栈时:
const LoginTabNavigator = createBottomTabNavigator({
LoginScreen: { screen: LoginScreen, navigationOptions:{tabBarVisible:false}},
Record: {screen: RecordStack}
});二.在class内:
static navigationOptions = { header: null ,tabBarVisible: false}这样是导航栏和tab bar都隐藏了.
上面对于单个stack来说操作navigationOptions都很简单,但是混合起来就很容易出现操作失败.
例如
const RecordStack = createStackNavigator({
RecordVC: {screen: RecordVC},
});
const LoginTabNavigator = createBottomTabNavigator({
LoginScreen: { screen: LoginScreen, navigationOptions:{tabBarVisible:false}},
Record: {screen: RecordStack}
});
我这里把LoginScreen的tab bar隐藏了,那么如果我想跳转到RecordStack里面又把tab bar显示出来呢?
const RecordStack = createStackNavigator({
RecordVC: {screen: RecordVC, navigationOptions:{tabBarVisible:false}},
});上面这样做,是不会显示回tab bar的,这是因为
createStackNavigator,createBottomTabNavigator
都是继承NavigationContainer,而navigationOptions是NavigationContainer的父类属性,所以子类在创建的时候都分别有各自的navigationOptions,上面的navigationOptions显然是针对RecordStack,然而createStackNavigator里面并没有tabBarVisible这个属性,所以修改失败.(虽然没有这个属性,但IDE并没有报错,很容易让人误解可以修改tabBarVisible.
综上,使用navigationOptions,要看清楚究竟是哪个stack的,跨stack是无效的.
6.tab bar& navigation跳转:
参考:https://reactnavigation.org/docs/en/tab-based-navigation.html
官方的是简单跳转,基本原理和上面说的一样.
实现点击按钮后跳到另外一个tab:
例如我上面的home页面:
render() {
return (
<View style={{flex: 1, flexDirection: 'row', marginTop: 64}}>
<Button style={{flex: 1, backgroundColor: 'red', justifyContent: 'center', alignItems: 'center'}}
title="预约服务"
onPress={() => this.props.navigation.navigate('Book', { title: '選擇服務', des: '我是返回点击我' })}
/>
<Button style={{flex: 1, backgroundColor: 'red', justifyContent: 'center', alignItems: 'center'}}
title="我的预约"
onPress={() => this.props.navigation.navigate('Mybook', { title: '選擇服務', des: '我是返回点击我' })}
/>
<Button style={{flex: 1, backgroundColor: 'red', justifyContent: 'center', alignItems: 'center'}}
title="我的会籍"
onPress={() => this.props.navigation.navigate('Member', { title: '選擇服務', des: '我是返回点击我' })}
/>
</View>有三个按钮,因为home已经装进tab stack,所以点击相应按钮,就可以用
this.props.navigation.navigate('Member', { title: '選擇服務', des: '我是返回点击我' })}跳转到Member标签里面了.this.props.navigation.push也是可以的.注意navigate('Member'这个参数就是上面你定义的tab stack的index名称.
难点来了,如果我想实现ios里present页面的效果呢.其实就是出栈另外进入一个页面,然后再重新进入原来的栈(因为出栈了,所以上下都没有bar).有些资料提示是混编,进入回ios,用present dismiss.但是纯RN要解决这个问题,就需要一些迂回的思路了.
首先尝试了一般的隐藏bar方法,但是因为上面说了tab和navigator的navigationOptions是分开的,在tab stack隐藏了,进入了login页面,但是login页面再跳转无法再重新显示回来.最烦人的是,RN无论如何都要建stack跳转.那么我们想到再建一个tab stack,只装login就可以.那么就可以在里面隐藏tab bar了.(后来看到另一篇文章讲了一种方法可以跨stack隐藏的,参考https://www.jianshu.com/p/97cafea3ca38?utm_source=desktop&utm_medium=timeline)
例如:
const LoginTabNavigator = createBottomTabNavigator({
LoginScreen: { screen: LoginScreen, navigationOptions:{tabBarVisible:false}},
});
export const TabNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen},
Book: { screen: BookStack},
Mybook: {screen: LoginNavigator},
Member: {screen: MemberStack},
Record: {screen: RecordStack}
},然后在login里面button使用
this.props.navigation.navigate('Member', { title: '選擇服務', des: '我是返回点击我' })}就可以跳转回原来的tab stack的Member里面了,而且tab bar又重新显示出来了.手动模拟了出栈进栈的效果.
后来再发现了createSwitchNavigator,更方便,不用navigationOptions:{tabBarVisible:false},直接跳进去就没有tab bar了.所以操作是:
onst LoginNavigator = createSwitchNavigator({
LoginScreen: { screen: LoginScreen},
});
// 通过TabNavigator做路由映射
export const TabNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen},
Book: { screen: BookStack},
Mybook: {screen: 持久化结果?LoginNavigator:MemberStack,navigationOptions:{tabBarVisible:持久化结果?false:true}},
Member: {screen: MemberStack},
Record: {screen: RecordStack}
},上面的代码
持久化结果?LoginNavigator:MemberStack
想实现的是,如果我已经登录了,那么我肯定就不需要再跳进去login页面多一次了.怎么设计呢.我们这里可以通过三元运算符.第一次跳进去login页面了,然后登录后给一个已经登录的flag持久化.然后点击按钮跳回Mybook这个tab,里面获取持久化的值,如果已经登录了,就进入MemberStack里面.
最后发现不用再装一个栈这么麻烦,直接
export const TabNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen},
Book: { screen: BookStack},
Mybook: {screen: 持久化结果?LoginScreen:MemberStack,navigationOptions:{tabBarVisible:持久化结果?false:true}},
Member: {screen: MemberStack},
Record: {screen: RecordStack}
},
7.<Modal>
今天在最新研究上面这种出栈入栈操作时候,发现了Modal这种操作.一般这是用于弹出一个dialog的操作,但是如果我的dialog是整个页面,就可以实现login页面覆盖上去tab页面的效果了,类似IOS ModalAndView也就present的效果.
login页面:加上持久化(如果已经登录下次不进入login):
import React, { Component } from 'react';
import { Button, Text, View , Modal, AsyncStorage, Dimensions} from 'react-native';
export const deviceWidth = Dimensions.get('window').width; //设备的宽度，单位dp
export const deviceHeight = Dimensions.get('window').height;
export default class LoginScreen extends React.Component {
state = {
visible: false,
transparent: true,
};
getLoginFalg = function() {
AsyncStorage.getItem("LoginFalg", (error, result) => {
if (!error) {
if(result == "true1"){
console.log('已经login' + result)
this.setState({visible:false})
}else{
this.setState({visible:true})
}
}
})
};
loginClick = function() {
console.log('Login页面')
AsyncStorage.setItem("LoginFalg", "true1", (error) => {
if (!error) {
// Alert.alert("login success.");
console.log('已经login success')
this.setState({visible:true})
return
}
Alert.alert("login failed.");
})
};
render() {
this.getLoginFalg()
console.log('Login页面')
return (
<View style={{ flex: 1}}>
<Modal
visible={this.state.visible}
animationType='slide'
// transparent={this.state.transparent}
onRequestClose={()=>{
// Alert.alert("Modal has been closed.");
}}
onShow={()=>{
// Alert.alert("Modal has been show.");
}}>
<View style={{justifyContent: 'center', alignItems: 'center',height:deviceHeight,width:deviceWidth,backgroundColor:'white'}}>
<Button title='Login' onPress={()=>this.loginClick()}/>
</View>
</Modal>
</View>
);
}
}
解释一下持久化:
获取:
AsyncStorage.getItem("LoginFalg", (error, result) => {
if (!error) {
if(result == "true1"){
console.log('已经login' + result)
this.setState({visible:false})
}else{
this.setState({visible:true})
}
}
}) getItem("LoginFalg", (error, result): LoginFalg是Key值,对应setItem的Key.
设置:
AsyncStorage.setItem("LoginFalg", "true1", (error) => {
if (!error) {
// Alert.alert("login success.");
console.log('已经login success')
this.setState({visible:true})
return
}
Alert.alert("login failed.");
}) setItem("LoginFalg", "true1", (error),=> {,"true1"就是设置的value值.
这样只要在login后的页面里引用一下控件:
import LoginScreen from './LoginScreen'
<LoginScreen/>
即可Modal覆盖上去
8.<Navigator>
有一些资料是使用这个标签,重新写navigator的,例如一下项目:
https://github.com/chjwrr/RN-tabbar-navigation
这个标签在0.55版本已经过期了,只能在0.54一下版本使用,要使用的话就需要引入另外一个react-native-deprecate组件.
这里简单说一下,这个组件很多东西都要手动配置,重载方法,看起来是没有最新版本的stack清晰易懂.
creatNavigator (component){
return (
<Navigator
initialRoute={{ name: component, component: component }}//默认加载的页面
configureScene={this.configureScene}
renderScene={this.renderScene}
style={{flex:1}}
navigationBar={
<Navigator.NavigationBar style={HomePageNavStyle.navStyleBase}
routeMapper={NavigationBarRouteMapper}/>}
/>
)
}这个是核心部分.如果想去掉bar的话,不写navigationBar这个属性部分就可以了.
var NavigationBarRouteMapper = {
// 标题
Title(route, navigator, index, navState) {
return (
<View>
<Text>
你好
</Text>
</View>
);
},
// 左键
LeftButton(route, navigator, index, navState) {
if (index > 0) {
return (
<View>
<TouchableOpacity
underlayColor='transparent'
onPress={() => {
if (index > 0) {
navigator.pop()
}
}}>
<Text style={HomePageNavStyle.navLeftButtonStyle}>
返回
</Text>
</TouchableOpacity>
</View>
);
} else {
return null;
}
},
RightButton(route, navigator, index, navState) {
if (route.onPress)
return (
<View>
<TouchableOpacity
onPress={() => route.onPress()}>
<Text style={HomePageNavStyle.navRightButtonStyle}>
right
</Text>
</TouchableOpacity>
</View>
);
},
};这个部分是画navigator bar的ui的,通过style CSS可以控制位置样式等等.
只要在页面使用了
this.props.navigator.push({
component:FirstPage_first
})就可以跳转到下一个页面,而且也有navigator bar
在入口类render内使用:
import 类进来,然后
<HPTB_Navigator/>
会自动进入
