React-native-scrollable-tab-view详解

前言:他方山上有佳石,可以用来琢玉器。只有解决了一个红屏,才有机会遇见另一个红屏。只有解决了一个困难,才有机会遇到其他的困难。O(∩_∩)O~生命不息,奋斗不止。

React Native中有许多第三方用于封装tabBar的库,当然也有官方提供的。React-native-scrollable-tab-view是一款非常实用的第三方库。放于界面之上可以实现一个界面中子界面的切换效果,置于界面之下可实现功能模块间的切换,通常用于封装自定义的tabBar。

安装

  • 在终端输入命令 npm i react-native-scrollable-tab-view --save 这条命令中--save的目的是让它写入到package.json文件中去。如若在安装的过程中提示没有权限安装等信息,请在这条命令的后面加上 --force强制安装。
  • 确认安装 打开package.json文件,如若看到下图所示的效果,则说明安装正确。

属性

  • renderTabBar:用于渲染TabBar。添加该属性,需要在引入组件之时加上它的子组件。系统提供两种方式,DefaultTabBar和ScrollableTabBar。DefaultTabBar表示Tab.item会平分水平方向上的空间,而ScrollableTabBar表示所有的tabBar.item的长度将会超过屏幕宽度,但是当滚动屏幕之时可以显示出来。当然我们也可以自定义它的模式。
//引入
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';

//在render函数中
 render() {
        return (
            <ScrollableTabView
               //渲染成ScrollableTabBar模式 
                // renderTabBar={() => <ScrollableTabBar/>}

              //渲染成自定义的模式
                renderTabBar={() => <MyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}
     >
<ScrollableTabView/>
  • tabBarPosition:表示TabBar的位置。一共有四个取值:top(放在界面上方)、bottom(放在界面底部)、overlayTop(有悬浮效果在上方)、overlayBottom(有悬浮效果在下方)
tabBarPosition='bottom'
效果图.gif
  • onChangeTab:切换界面的时候会调用该方法,该属性中包含一个参数,它是一个object对象,这个对象有两个参数,i表示被选中的下标,ref表示被选中的对象。
onChangeTab = {(obj)=>{console.log('被选中的下标:'+obj.i);}}
  • onScroll:视图滑动时调用,该属性会传递一个Float类型的数字,范围是[0,tab的数量-1]
 onScroll={
                    (position) => {
                        console.log('滑动时的位置:' + position);
                    }
                }
  • locked:手指是否能拖动,默认为false(可拖动),如为true则表示只能通过点击tab来切换视图。
 locked={false}
  • initialPage:初始化时被选中的下标,默认为0
initialPage={0}
  • page:设置选中指定的tab
  • children:表示所有子视图的数组
  • tabBarUnderlineColor:设置Tab选中时下方横线的颜色。注意,该属性只是在系统提供的DefaultTabBar和ScrollableTabBarTab状态下才有效果。
 renderTabBar={() => <ScrollableTabBar/>}
 tabBarUnderlineColor={'red'}
  • tabBarBackgroundColor:整个tabBar的背景颜色。
  • tabBarActiveTextColor/tabBarInactiveTextColor: 选中/未选中的tabBar的文字颜色
  • tabBarTextStyle:提供一个object对象的参数,用于设置文字的样式,如字体字号
  • style:这是所有view都拥有的属性
  • scrollWithoutAnimation:切换tab时,是否有动画默认是false,即没有。
  • prerenderingsiblingsNumber:默认为0,表示预渲染视图的个数,为0表示只渲染当前页。

实例

1、构建项目 为了使iOS端和android端能更和谐的使用一套代码。先创建一个入口文件取名为APP.js。此时,index.iOS.js和index.android.js文件就只需要引入APP.js文件即可。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
//iOS端和安卓端公用一套代码
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import App from './APP'
export default class babyShow extends Component {
  render() {
    return (
        <App/>
    );
  }
}

AppRegistry.registerComponent('babyShow', () => babyShow);

2、封装自定义的TabBar。取名为MyTabBar.js 封装时要注意,有三个属性是系统传入的。即goToPage、activeTab、tabs。所以要先在规定属性类型时先写上这三个属性。其他的属性则可以自己选择。 在使用tabbar的时候,通常会用到图片。这里可以使用第三方的图库。 安装方法如下: npm install react-native-vector-icons --save 安装好了之后记得一定要输入下面的命令 rnpm link 重新编译即可使用

import Icon from 'react-native-vector-icons/Ionicons'; //这个是图标

以下是整个MyTabBar文件的全部代码。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import Icon from 'react-native-vector-icons/Ionicons'; //这个是图标

export default class MyTabBar extends Component {
    static propTypes = {

        goToPage: React.PropTypes.func, // 跳转到对应tab的方法
        activeTab: React.PropTypes.number, // 当前被选中的tab下标
        tabs: React.PropTypes.array, // 所有tabs集合

        tabNames: React.PropTypes.array, // 保存Tab名称
        tabIconNames: React.PropTypes.array, // 保存Tab图标

    };  // 注意这里有分号


    render() {
        return (
            <View style={styles.tabs}>
                {/*遍历。系统会提供一个tab和下标 调用一个自定义的方法*/}
                {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
            </View>
        );
    }

    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 ? "#FF3399" : "#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>
        );
    }


}

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

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

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

});

3、调用自定义的tabbar文件 在APP.js文件中,把属性tabNames和tabIconNames属性定义在状态机上,然后传入到属性中。

import React,{Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} 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 './Common/MyTabBar';

export default class APP extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabNames: ['主页', '分类', '她他群','我的'],
            tabIconNames: ['ios-home', 'ios-grid',  'logo-buffer', 'ios-contact'],

        };
    }


    render() {
        let tabNames = this.state.tabNames;
        let tabIconNames = this.state.tabIconNames;
        return (
            <ScrollableTabView
                //renderTabBar={() => <DefaultTabBar/>}
                renderTabBar={() => <MyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}


                tabBarPosition={'bottom'}

                onChangeTab={
                    (obj) => {
                        console.log('被选中的tab下标:' + obj.i);
                    }
                }

                onScroll={
                    (position) => {
                        console.log('滑动时的位置:' + position);
                    }
                }
                locked={false}
                initialPage={0}
                prerenderingSiblingsNumber={1}

            >
              {/*每个页面 设定四个页面*/}
                <View tabLabel="page1" style={styles.center}>
                    <Text >每一天都不同</Text>
                    <IconFont.Button name="facebook" backgroundColor="#FF3399" size={20} >
                        妲己会一直爱主人
                    </IconFont.Button>
                    <Icon name="md-alarm" size={50}></Icon>
                    <IconFont.Button name="twitter" backgroundColor="#FF3399" size={20} >
                        因为被设定成这样
                    </IconFont.Button>
                </View>

                <View tabLabel="page2" style={styles.center}>
                    <Text style={{color:'pink'}}>小乔要努力变强</Text>
                </View>
                <View tabLabel="page3" style={styles.center}>
                    <Text style={{color:'red'}}>萝莉身御姐心</Text>
                </View>

                <View tabLabel="page4" style={styles.center}>
                    <Text style={{color:'#70f3ff'}}>别靠近我,阿福不想带来不幸</Text>

                </View>


            </ScrollableTabView>
        );
    }
}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

Cocoa编程中视图控制器与视图类详解

iPhone编程规则是:一个窗口,多个视图。UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示在UIWindow(这其实也是个...

2405
来自专栏谦谦君子修罗刀

RN手势

React Native框架底层的手势响应系统提供了响应处理器,PanResponder API将这些手势响应处理器再次进行封装,便于开发者对手势进行处理。 ...

30912
来自专栏前端知识分享

第140天:前端开发中浏览器兼容性问题总结(一)

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本,我之前的项目要求兼容IE8.0以上的版本,Chrome 48以上,FireFox 44以上。有了这些最基本...

1.1K3
来自专栏流浪猫的golang

golang 多线程爬虫

1142
来自专栏Java后端技术

Javascript中最常用的55个经典技巧(转)

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键  <table border oncon...

1092
来自专栏林德熙的博客

win10 uwp win2d CanvasVirtualControl CanvasAnimatedControlCanvasVirtualControl其他博客

本文来告诉大家 CanvasVirtualControl ,在什么时候使用这个控件。

1501
来自专栏BestSDK

年薪30万的前端面试题,你能答对几道?|附答案

HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元...

4146
来自专栏Youngxj

41个Web开发者都收藏的实用代码

2233
来自专栏Google Dart

AngularDart Material Design 处理指示器 顶

请参阅http://www.google.com/design/spec/components/progress-activity.html。

943
来自专栏云瓣

React之父子组件传递和其它一些要点

react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度。下面对一些react日常开发中的注意事项...

3878

扫码关注云+社区