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

Z时代
2024-01-10
分类：综合

react

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

底部 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 (
            //因为要有点击效果 所以要引入可触摸组件
            <TouchableOpacity onPress={()=>this.props.goToPage(i)} style={styles.tab} key={tab}>
                <View style={styles.tabItem}>
                    <Icon
                        name={this.props.tabIconNames[i]} // 图标 调用传入的属性
                        size={30}
                        color={color}/>
                    <Text style={{color: color}}>
                        {this.props.tabNames[i]}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }
  render() { 
    return (
        <View style={styles.tabs}>
            {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
        </View>
    );
  }
}
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 (
      <ScrollableTabView
        style = {styles.container}
        renderTabBar={() => <MyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}
        tabBarPosition={'bottom'}
        locked={false}
        initialPage={0}
        prerenderingSiblingsNumber={1}
      >
        <View tabLabel="page1" style={styles.center}>
            <Icon name="logo-github" size={50}></Icon>
            <IconFont.Button name="github" backgroundColor="#FF3399" size={20} >
              专为开发人员而设
            </IconFont.Button>
        </View>
        <View tabLabel="page2" style={styles.center}>
          <Icon name="logo-apple" size={50}></Icon>
          <IconFont.Button name="apple" backgroundColor="#FF3399" size={20} >
              在 Apple 上构建任何应用
            </IconFont.Button>
        </View>
        <View tabLabel="page3" style={styles.center}>
          <Icon name="logo-android" size={50}></Icon>
          <IconFont.Button name="android" backgroundColor="#FF3399" size={20} >
              在 android 上构建任何应用
            </IconFont.Button>
        </View>
        <View tabLabel="page4" style={styles.center}>
          <Icon name="logo-html5" size={50}></Icon>
          <IconFont.Button name="html5" backgroundColor="#FF3399" size={20} >
              在 html5 上构建任何应用
            </IconFont.Button>
        </View>
      </ScrollableTabView>
    );
  }
}
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,
    },
})