React Native 导航器之 react-native-s

在React Native开发中，官方为我们提供的Tab控制器有两种：TabBarIOS和ViewPagerAndroid。TabBarIOS，仅适用于IOS平台
ViewPagerAndroid，仅适用于Android平台（严格来讲并不算，因为我们还需要自己实现Tab）。在项目开发中，我们优先选择一些开源兼容性比较好的第三方库，例如，react-navigation，以及本文即将说到的react-native-scrollable-tab-view。react-native-scrollable-tab-view不仅可以实现顶部的Tab切换，还能实现底部的切换。

属性

名称	类型	说明
renderTabBar	function	TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar。
tabBarPosition	string	top：位于屏幕顶部 bottom：位于屏幕底部 overlayTop：位于屏幕顶部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色） overlayBottom：位于屏幕底部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色）
onChangeTab	function	Tab切换之后会触发此方法
onScroll	function	视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是[0, tab的数量-1]
locked	bool	表示手指是否能拖动视图，默认为false
initialPage	integer	初始化时被选中的Tab下标，默认是0
page	integer	设置选中指定的Tab。

更多属性请参考：源码

顶部的Tab切换

1. 安装
$ npm install --save react-native-scrollable-tab-view

2. 效果图

navigator.jpg

3. 实例代码

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
} from 'react-native';

import ScrollableTabView,
{
  DefaultTabBar,
  ScrollableTabBar
} from 'react-native-scrollable-tab-view';

var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;

export default class App extends Component{
  render() {
    return (
      <ScrollableTabView
        style={styles.container}
        renderTabBar={() => <DefaultTabBar />}
        tabBarUnderlineStyle={styles.lineStyle}
        tabBarActiveTextColor='#FF0000'
      >
        <Text style={styles.textStyle} tabLabel='娱乐'>娱乐</Text>
        <Text style = {styles.textStyle} tabLabel = '科技'>科技</Text>
        <Text style={styles.textStyle} tabLabel='军事'>军事</Text>
        <Text style = {styles.textStyle} tabLabel = '体育'>体育</Text>
      </ScrollableTabView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  lineStyle: {
    width: ScreenWidth / 4,
    height: 2,
    backgroundColor:'red'
  },
  textStyle: {
    flex: 1,
    fontSize: 20,
    marginTop: 20,
    textAlign:'center'
  },
});