0
点赞
收藏
分享

微信扫一扫

[React Native]navigation&tab bar整合


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/>

 会自动进入

 

举报

相关推荐

0 条评论