在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) => {
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 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：大概就是这样了，如果你看不懂，请不要吐槽我的表达能力以及排版
68
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
