《ReactNative》之ScrollableTabView标签页切换

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);