React Native 导航器之 react-native-scrollable-tab-view

在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. 效果图

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 (
       }
        tabBarUnderlineStyle={styles.lineStyle}
        tabBarActiveTextColor='#FF0000'
      >
        娱乐
        科技
        军事
        体育
      
    );
  }
}

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'
  },
});

底部 Tab 切换

1. 安装
$ npm install react-native-scrollable-tab-view --save 导航器
$ npm install react-native-vector-icons --save 图标
$ npm install --save prop-types PropTypes
注意：安装好后记得一定要输入下面的命令:
$ react-native link

2. 实例代码
新建 src 文件夹，在其下创建 MyTabBar.js 文件。

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

import PropTypes from 'prop-types';

import Icon from 'react-native-vector-icons/Ionicons';

export default class MyTabBar extends Component { 
    static propTypes = {
        goToPage: PropTypes.func, // 跳转到对应tab的方法
        activeTab: PropTypes.number, // 当前被选中的tab下标
        tabs: PropTypes.array, // 所有tabs集合
        tabNames: PropTypes.array, // 保存Tab名称
        tabIconNames: PropTypes.array, // 保存Tab图标
    };

    componentDidMount() {
        // Animated.Value监听范围 [0, tab数量-1]
        this.props.scrollValue.addListener(this.setAnimationValue);
    }

    setAnimationValue({value}) {
        console.log('动画值：'+value);
    }

    //处理tabbar的颜色和字体及图标
    renderTabOption(tab, i) {
        let color = this.props.activeTab == i ? "#1FB9FF" : "#ADADAD"; // 判断i是否是当前选中的tab，设置不同的颜色
        return (
            //因为要有点击效果 所以要引入可触摸组件
            this.props.goToPage(i)} style={styles.tab} key={tab}>
                
                    
                    
                        {this.props.tabNames[i]}
                    
                
            
        );
    }
  render() { 
    return (
        
            {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
        
        
    );
  }
}

const styles = StyleSheet.create({
    tabs: {
        flexDirection: 'row',
        height: 50,
    },

    tab: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    tabItem: {
        flexDirection: 'column',
        alignItems: 'center',
    },
  
})

App.js

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

import ScrollableTabView, { DefaultTabBar,ScrollableTabBar}from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import IconFont from 'react-native-vector-icons/FontAwesome';

import MyTabBar from './src/MyTabBar';

export default class App extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      tabNames: ['主页', '分类', '书籍', '我的'],
      tabIconNames: ['ios-home', 'ios-grid', 'ios-book', 'ios-contact'],

    }
  }
  render() { 
    let tabNames = this.state.tabNames;
    let tabIconNames = this.state.tabIconNames;
    return (
       }
        tabBarPosition={'bottom'}
        locked={false}
        initialPage={0}
        prerenderingSiblingsNumber={1}
      >
        
            
            
              专为开发人员而设
            
        

        
          
          
              在 Apple 上构建任何应用
            
        
        
          
          
              在 android 上构建任何应用
            
        

        
          
          
              在 html5 上构建任何应用
            
        


      
        
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
    },
    center: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
  
})

3. 效果图