《ReactNative》之ScrollableTabView标签页切换

来源：互联网发布：淘宝好吃的零食店编辑：程序博客网时间：2024/05/09 19:22

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

2 0