关于react native android navigationBar的隐藏问题
2016-04-13 00:00
411 查看
摘要: 关于react native android navigationBar的隐藏问题
在IOS上,react native有官方的TabBar使用,但是android,就需要使用第三方插件或者自己手写了。
我在项目中使用了react-native-scrollable-tab-view插件,但是在使用过程中,遇到了一些问题,无法满足我的需求,
于是在这篇文章中记录一下我的使用心得。
使用了react-native-vector-icons插件
参kao的开源项目:使用reactNative实现的GitHub客户端,资讯头条;
我的项目需求:
和IOS一样,使用tabBar,底部有两个tab(主页,我的),在我的页面中,不需要顶部标题,而切换到其他页面时,需要隐藏底部tabBar。
在使用react-native-scrollable-tab-view插件时,如果将整个tab插件放在Navigator中,那么在切换底部tab的时候,标题栏的标题无法进行切换,而如果将Navigator放在Tab内部,那么底部TabBar无法隐藏。
上面就是示意图,下面就是代码了
关键点就是需要根据需要隐藏标题
index.android.js
Main.js
Home.js
不过,这不是最好的解决办法,应该在返回Main页面时,应该Home页面的标题不是NavigationBar,所以会有0.4秒的白屏出现,当然,如果你的项目顶部标题栏是白色的,那就看不出来了。
ps:大概就是这样了,如果你看不懂,请不要吐槽我的表达能力以及排版
在IOS上,react native有官方的TabBar使用,但是android,就需要使用第三方插件或者自己手写了。
我在项目中使用了react-native-scrollable-tab-view插件,但是在使用过程中,遇到了一些问题,无法满足我的需求,
于是在这篇文章中记录一下我的使用心得。
使用了react-native-vector-icons插件
参kao的开源项目:使用reactNative实现的GitHub客户端,资讯头条;
我的项目需求:
和IOS一样,使用tabBar,底部有两个tab(主页,我的),在我的页面中,不需要顶部标题,而切换到其他页面时,需要隐藏底部tabBar。
在使用react-native-scrollable-tab-view插件时,如果将整个tab插件放在Navigator中,那么在切换底部tab的时候,标题栏的标题无法进行切换,而如果将Navigator放在Tab内部,那么底部TabBar无法隐藏。
上面就是示意图,下面就是代码了
关键点就是需要根据需要隐藏标题
_setNavigatorRef = (navigator) => { if (navigator !== this._navigator) { this._navigator = navigator; if (navigator) { // Observe focus change events from the owner. this._listeners = [ navigator.navigationContext.addListener('willfocus', this._onWillFocus), ]; } } } ...... componentWillUnmount() { this._listeners && this._listeners.forEach(listener => listener.remove()); } _onWillFocus = (event) => { &n 3ff0 bsp; if(event.data.route.id == 'main') { this.setState({ hideNavBar: true, }); } else { this.setState({ hideNavBar: false, }); } } ...... navBar() { if(!this.state.hideNavBar) { return ( <Navigator.NavigationBar routeMapper={{ LeftButton: this.LeftButton, RightButton: this.RightButton, Title: this.Title }} style={styles.navBar} navigationStyles={NavigatorNavigationBarStyle} //页面切换的动画效果 /> ) } else { return <Text style={{height:0, position:'absolute', top:0}} />; } }
index.android.js
import React, { AppRegistry, Component, StyleSheet, Text, View, TouchableOpacity, Platform, Navigator } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; import NavigatorNavigationBarStyle from './LLNavigatorBarStyle'; import Main from './Main'; import TwoView from './TwoView'; import Three from './Three'; class reactNative23 extends Component { constructor(props) { super(props); this.state = { hideNavBar: true, starDatas: null, }; } renderScene = (route, navigator) => { switch(route.id) { case 'two': return <TwoView navigator={navigator}/> case 'three': return <Three navigator={navigator}/> default: return <Main navigator={navigator}/> } } componentWillUnmount() { this._listeners && this._listeners.forEach(listener => listener.remove()); } _onWillFocus = (event) => { if(event.data.route.id == 'main') { this.setState({ hideNavBar: true, }); } else { this.setState({ hideNavBar: false, }); } } _setNavigatorRef = (navigator) => { if (navigator !== this._navigator) { this._navigator = navigator; if (navigator) { // Observe focus change events from the owner. this._listeners = [ navigator.navigationContext.addListener('willfocus', this._onWillFocus), ]; } } } // Nav使用 navBar() { if(!this.state.hideNavBar) { return ( <Navigator.NavigationBar routeMapper={{ LeftButton: this.LeftButton, RightButton: this.RightButton, Title: this.Title }} style={styles.navBar} navigationStyles={NavigatorNavigationBarStyle} //页面切换的动画效果 /> ) } else { return <Text style={{height:0, position:'absolute', top:0}} />; } } LeftButton(route, navigator, index, navState) { return ( <TouchableOpacity onPress={() => navigator.pop()} style={styles.navBarLeftButton}> <Icon name='ios-arrow-left' size={30} color='#fff' style={styles.icon} /> </TouchableOpacity> ); } RightButton(route, navigator, index, navState) { return null; } Title(route, navigator, index, navState) { return ( <View style={styles.navBarText}> <Text style={styles.navBarTitleText} numberOfLines={1}> {route.title} </Text> </View> ); } /** * 路由转跳的效果,默认是FadeAndroid */ configureScene(route, routeStact) { //如果路由有传 切换方式,则使用 if (route.configureScene) { return route.configureScene; } else { return Navigator.SceneConfigs.FadeAndroid; } } render() { return ( <Navigator ref={this._setNavigatorRef} debugOverlay={false} configureScene={this.configureScene.bind(this)} style={styles.appContainer} //sceneStyle={this.state.hideNavBar ? {marginTop: 0} : styles.sceneStyle} //所有容器的样式 initialRoute={{id: 'main'}} renderScene={this.renderScene} navigationBar={this.navBar()} /> ); } } const styles = StyleSheet.create({ navBar: { backgroundColor:'#fe4500', height: (Platform.OS === 'ios') ? 64 : 50 }, navBarText: { flex: 1, justifyContent: 'center', alignItems: 'center', width: 250, }, navBarTitleText: { color: '#fff', fontSize: 16, fontWeight: '500', textAlign: 'center', marginHorizontal: 10, marginVertical: 11, }, navBarLeftButton: { paddingLeft: 10, width: 40, height: 50, }, navBarRightButton: { marginRight:5, }, icon: { marginTop:(Platform.OS === 'ios') ? 6: 8, textAlign:'center' } }); AppRegistry.registerComponent('reactNative23', () => reactNative23);
Main.js
import React, { Component, } from 'react-native'; import ScrollableTabView from 'react-native-scrollable-tab-view'; import Home from './Home'; import My from './My'; import TabBar from './TabBar'; export default class Main extends Component { render() { return ( <ScrollableTabView tabBarPosition='bottom' renderTabBar={() => <TabBar />} locked={true} > <Home navigator={this.props.navigator} tabLabel={{tabName: '主页', iconName: 'ios-home'}}/> <My& 7fe0 nbsp;navigator={this.props.navigator} tabLabel={{tabName: '我的', iconName: 'ios-person'}}/> </ScrollableTabView> ) } }
Home.js
import React, { Component, View, TouchableOpacity, StyleSheet, Text } from 'react-native'; export default class Home extends Component { toTwo = () => { this.props.navigator.push({ id: 'two', title: '第二页面' }) } render() { return ( <View style={styles.container}> <View style={styles.header}> <Text style={{color: '#fff', fontSize: 16, fontWeight: '500',}}>主页</Text> </View> <View style={styles.content}> <TouchableOpacity onPress={this.toTwo} style={styles.button}> <Text>跳转到第二页</Text> </TouchableOpacity> </View> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, }, header: { backgroundColor: '#fe4500', height: 50, justifyContent: 'center', alignItems: 'center' }, content: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { justifyContent: 'center', alignItems: 'center', height: 50, width: 200, backgroundColor: '#fe4500', } })
不过,这不是最好的解决办法,应该在返回Main页面时,应该Home页面的标题不是NavigationBar,所以会有0.4秒的白屏出现,当然,如果你的项目顶部标题栏是白色的,那就看不出来了。
ps:大概就是这样了,如果你看不懂,请不要吐槽我的表达能力以及排版
相关文章推荐
- react简介
- React-router匹配的组件 如何使用?
- React 处理form表单input输入项双向数据绑定
- React 更新数据array子项添加新的属性便于循环处理
- React 动态更新子项item从array数据
- React 级联下拉列表实现
- ReactNative初学笔记1.1flexbox布局
- React-Router JS控制路由跳转
- React Native之创建iOS视图
- React-Native系列Android——Touch事件原理及状态效果
- 高性能I/O设计模式Reactor和Proactor
- 【React Native 学习笔记】React Native For Android程序白屏
- React技术栈及前端技术总结
- 整理了一份React-Native学习指南
- 函数响应式编程(FRP)框架--ReactiveCocoa
- Sublime Text 3 搭建 React.js 开发环境
- Sublime Text 3 搭建 React.js 开发环境
- java学习-【转】什么是Reactor模式,或者叫反应器模式
- Eziriz.Net.Reactor使用注意事项
- ReactiveX文档中文翻译