1.效果
2.安装
npm install react-native-scrollable-tab-view --save
3.引入
import ScrollableTabView from 'react-native-scrollable-tab-view';
4.完整代码
注：页面顶部蓝色那块是自定义组件TitleComponent ，代码见另一篇《ReactNative底部导航TabNavigator》
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
Navigator,
StyleSheet,
} from 'react-native';
import TitleComponent from './app/comp/home_title';
import ScrollableTabView from 'react-native-scrollable-tab-view';
class App extends Component{
componentWillMount(){
}
render(){
return(
<View style={{flex:1}}>
<TitleComponent title="ScrollableTabView"/>
<ScrollableTabView style={{flex:1,backgroundColor:'#fff',justifyContent:'center'}}
tabBarInactiveTextColor="#333"//未选中状态下tabLabel文字的颜色
tabBarActiveTextColor="#27B5EE"//选中状态下tabLabel文字的颜色
locked={false}//如果为ture，左右滑动时页面无法切换，只能通过点击tabLabel切换
tabBarBackgroundColor = "white" //tabLabel的背景色
tabBarUnderlineStyle = {{backgroundColor:'#00aeee',height:2,}}//tabLabel下面下划线的样式
>
<AndroidPage tabLabel = "Android" {...this.props}></AndroidPage>
<IOSPage tabLabel = "IOS" {...this.props}></IOSPage>
<JavaPage tabLabel = "Java" {...this.props}></JavaPage>
</ScrollableTabView>
</View>
);
}
}
class AndroidPage extends Component{
render(){
return(
<View style={styles.center}>
<Text style={[{fontSize:20},styles.red]}>我是Android</Text>
</View>
);
}
}
class IOSPage extends Component{
render(){
return(
<View style={styles.center}>
<Text style={[{fontSize:20},styles.red]}>我是IOS</Text>
</View>
);
}
}
class JavaPage extends Component{
render(){
return(
<View style={styles.center}>
<Text style={[{fontSize:20},styles.red]}>我是Java</Text>
</View>
);
}
}
const styles = StyleSheet.create({
center:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
red:{
color:'#f00',
},
});
AppRegistry.registerComponent('RN', () => App);
转载请注明原文地址: https://ju.6miu.com/read-674507.html
