React Native 带你一步一步实现TabNavitator

最新推荐文章于 2024-08-16 09:36:18 发布
最新推荐文章于 2024-08-16 09:36:18 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： RN学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vv_bug/article/details/72477601
版权

前言： 入rn坑已经有一段时间了，想想自己的学习过程还是比较艰辛的啊，唉唉～说多了都是泪啊（虽然现在也还是一个菜鸟），趁着年轻奋斗一下～废话不多说了，刚入rn的时候项目中就有用到github上的一个开源项目TabNavitator，真羡慕那些大牛啊～～ 今天写这篇博客的目的呢，也算是对TabNavitator的一个解析吧，就当个人的一个学习笔记了，大牛略过哈～

先上一下TabNavitator在github上的链接地址：

https://github.com/expo/react-native-tab-navigator

然后看一下我们实现出来的最终效果：

这里写图片描述

效果跟react-native-tab-navigator一样，毕竟是照着它写的。

好啦～～ 下面我们来仿照着react-native-tab-navigator来实现一下我们的TabNavitator。

我们使用TabNavitator的时候，一般是这样的：

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>

TabNavigator为最外面的布局，TabNavigator.Item为每个item，TabNavigator.Item的child为scene页面。

嗯嗯，先说一下思路：

  1. 根据传入的TabNavigator.Item确认TabBar中的内容。
  2. 根据TabNavigator.Item下面的child确定每个页面
  3. 根据传入的selected确认需要显示的view

好啦～我们开动了。

首先定义一个view叫MyTabNavitator，然后继承Component：

/**
 * @author YASIN
 * @version [PABank V01,17/5/18]
 * @date 17/5/18
 * @description MyTabNavitator
 */

import React,{Component}from 'react';
import {
    View,
}from 'react-native';
export default class MyTabNavitator extends Component{
    render(){
        return(
        );
    }
}

定义MyTabNavitator的属性：

static propTypes={  
        ...View.propTypes,
        sceneStyle: View.propTypes.style,//内容页面的样式
    }

我们的MyTabNavitator其实就是一个Container的角色，所以可以继承view的所有属性、并且我们把内容view的样式也通过它传进来。

限制sceneStyle的类型为View.propTypes.style，除了这个属性外，我们还可以为自定义属性设置哪些类型呢？ 

 static propTypes={
        ...View.propTypes,
        sceneStyle: View.propTypes.style,//内容页面的样式
        title: PropTypes.string //string类型的属性
    }

我们看看PropTypes到底有哪些类型：

var ReactPropTypes = {
  array: createPrimitiveTypeChecker('array'),
  bool: createPrimitiveTypeChecker('boolean'),
  func: createPrimitiveTypeChecker('function'),
  number: createPrimitiveTypeChecker('number'),
  object: createPrimitiveTypeChecker('object'),
  string: createPrimitiveTypeChecker('string'),
  symbol: createPrimitiveTypeChecker('symbol'),

  any: createAnyTypeChecker(),
  arrayOf: createArrayOfTypeChecker,
  element: createElementTypeChecker(),
  instanceOf: createInstanceTypeChecker,
  node: createNodeChecker(),
  objectOf: createObjectOfTypeChecker,
  oneOf: createEnumTypeChecker,
  oneOfType: createUnionTypeChecker,
  shape: createShapeTypeChecker
};

好啦～一些题外话了哈,接下来我们重写构造方法，并且完成一些state的初始化：

   // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            //需要渲染的页面的key值,每个key值对应一个相应的页面
            renderedSceneKeys: this._updateRenderedSceneKeys(props.children)
        };
    }

我们渲染页面的时候，当第一次进入页面的时候，我们只会渲染selected默认为true的那个页面，然后根据点击情况，动态的切换view显示，比如我们有两个页面 （“我的“、“商家“）第一次进来的时候显示“我的“页面，所以此时我们需要 把“我的‘页面对应的key值放入我们定义的renderedSceneKeys中，然后当我们切换到“商家“页面的时候，我们renderedSceneKeys集合中再加入“商家“页面对应的key值。

所以我们的_updateRenderedSceneKeys方法为：

/**
     * 更新需要渲染页面的key集合
     * @param children 所有的页面
     * @param oldSceneKey 老的key集合
     * @returns {*}  新的key集合
     * @private
     */
    _updateRenderedSceneKeys(children, oldSceneKey = Set()):Set {
        //创建一个新的集合
        let newSceneKeys = Set().asMutable();
        //遍历所有的页面
        React.Children.forEach(children, (item, index)=> {
            //页面为null直接返回
            if (item === null) {
                return;
            }
            //生成每个页面对应的key
            let key = this._getSceneKey(item, index);
            //老key集合中是否包含现在的key或者当前页面的selected是否为true
            //也就是把显示过的页面跟需要显示的页面都加入到key集合中
            if (oldSceneKey.has(key) || item.props.selected) {
                newSceneKeys.add(key);
            }
        });
        //返回一个新的集合
        return newSceneKeys.asMutable();
    }

    /**
     * 根据页面生成唯一的key值
     * @param item 每个页面
     * @param index 页面的index
     * @returns {*}  key值
     * @private
     */
    _getSceneKey(item, index):string {
        return `scene-${(item.key !== null) ? item.key : index}`;
    }

我们引入了一个叫“immutable“的第三方库，这也是facebook自己的集合库，很屌，功能很强大。

immutable库的文档地址：
http://facebook.github.io/immutable-js/docs/#/

相信学过java的童鞋看这个应该是没有什么问题的，因为跟java中的集合框架是一样的。

我们需要显示的页面是有了，但是我们的页面是动态改变的（动态改变TabNavitator的属性，知道需要显示的页面），所以我们需要在一个叫componentWillReceiveProps生命周期中做同样的操作，更新下我们的key集合：

/**
     * 当属性值改变的时候,会调用这个方法
     * @param nextProps
     */
    componentWillReceiveProps(nextProps) {
        //拿到之前的页面key集合
        let {renderedSceneKeys}=this.state;
        //重新更新state,更新key集合
        this.setState({
            renderedSceneKeys: this._updateRenderedSceneKeys(
                nextProps.children,
                renderedSceneKeys
            )
        });
    }

再来回顾下react的生命周期：

这里写图片描述

好啦，MyTabNavitator是定义的差不多了，我们再来看一下MyTabNavitator的使用方法：

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>

我们的MyTabNavitator只是一个container，需要显示的页面跟数据都在TabNavigator.Item中，所以接下来我们需要定义一下TabNavigator.Item：

我们同样创建一个view叫TabNavigatorItem，然后继承component：

/**
 * @author YASIN
 * @version [PABank V01,17/5/17]
 * @date 17/5/17
 * @description TabNavigatorItem
 */
import React,{
    Component,
    PropTypes
}from 'react';
import {
    View
}from 'react-native';
export default class TabNavigatorItem extends Component {
    static propTypes = {
        //tabbar图标正常时候显示的内容
        renderIcon: PropTypes.func,
        //tabbar图标选中时候显示的内容
        renderSelectedIcon: PropTypes.func,
        //tabbar显示的title
        title: PropTypes.string,
        //tabbar显示的title默认样式
        titleStyle: Text.propTypes.style,
        //tabbar显示的title选中后样式
        selectedTitleStyle: Text.propTypes.style,
        //tabbar的样式
        tabStyle: View.propTypes.style,
        //当前page是否被选中
        selected: PropTypes.bool,
        //tab点击的时候
        onPress: PropTypes.func
    }
    render() {
        //获取唯一的子控件
        let child=React.Children.only(this.props.children);
        //根据传入的child重新clone一个新的child(也就是我们传入的scene)
        return React.cloneElement(child,{
            style:[child.props.style,this.props.style]
        });
    }
}

然后我们把TabNavigatorItem放入TabNavitator的item属性中：

/**
 * @author YASIN
 * @version [PABank V01,17/5/18]
 * @date 17/5/18
 * @description MyTabNavitator
 */
import { Set } from 'immutable';
import React,{Component,PropTypes}from 'react';
import {
    View,
}from 'react-native';
import TabNavigatorItem from './TabNavigatorItem';
export default class MyTabNavitator extends Component {
    static propTypes = {
        ...View.propTypes,
        sceneStyle: View.propTypes.style,//内容页面的样式
        title: PropTypes.string //string类型的属性
    }
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            //需要渲染的页面的key值,每个key值对应一个相应的页面
            renderedSceneKeys: this._updateRenderedSceneKeys(props.children)
        };
    }
    /**
     * 更新需要渲染页面的key集合
     * @param children 所有的页面
     * @param oldSceneKey 老的key集合
     * @returns {*}  新的key集合
     * @private
     */
    _updateRenderedSceneKeys(children, oldSceneKey = Set()):Set {
        //创建一个新的集合
        let newSceneKeys = Set().asMutable();
        //遍历所有的页面
        React.Children.forEach(children, (item, index)=> {
            //页面为null直接返回
            if (item === null) {
                return;
            }
            //生成每个页面对应的key
            let key = this._getSceneKey(item, index);
            //老key集合中是否包含现在的key或者当前页面的selected是否为true
            //也就是把显示过的页面跟需要显示的页面都加入到key集合中
            if (oldSceneKey.has(key) || item.props.selected) {
                newSceneKeys.add(key);
            }
        });
        //返回一个新的集合
        return newSceneKeys.asMutable();
    }

    /**
     * 根据页面生成唯一的key值
     * @param item 每个页面
     * @param index 页面的index
     * @returns {*}  key值
     * @private
     */
    _getSceneKey(item, index):string {
        return `scene-${(item.key !== null) ? item.key : index}`;
    }

    /**
     * 当属性值改变的时候,会调用这个方法
     * @param nextProps
     */
    componentWillReceiveProps(nextProps) {
        //拿到之前的页面key集合
        let {renderedSceneKeys}=this.state;
        //重新更新state,更新key集合
        this.setState({
            renderedSceneKeys: this._updateRenderedSceneKeys(
                nextProps.children,
                renderedSceneKeys
            )
        });
    }
    render() {
        return (
        );
    }
}
MyTabNavitator.Item=TabNavigatorItem;

好啦，定义好TabNavigatorItem后，我们就要去实现下我们的TabNavitator的render方法了：

render() {
        //获取相应的props内容
        let{style,children,sceneStyle,...props}=this.props;
        //遍历所有的children
        //需要显示的页面跟显示过的页面
        let scenes=[];
        React.Children.forEach(children,(child,index)=>{
            if(child===null){
                return;
            }
            //根据子view获取唯一key
            let key=this._getSceneKey(child,index);
            let {renderedSceneKeys}=this.state;
            //判断该view是不是将要显示的view或者是不是显示过的view
            if(!renderedSceneKeys.has(key)){
                return;
            }
            //当前view为选中状态就设置其样式为sceneContainer
            let scene=null;
            if (child.props.selected) {
                scene = (
                    <View {...child.props} style={styles.sceneContainer} pointerEvents={'auto'} removeClippedSubviews={false}>
                        {child}
                    </View>
                )
            } else {//当前view为未选中状态就设置其样式为hiddenSceneContainer
                scene = (
                    <View {...child.props}style={styles.hiddenSceneContainer} pointerEvents={'none'} removeClippedSubviews={false}>
                        {child}
                    </View>
                )
            }
            if(scene!==null)scenes.push(scene);
        });

        //选出当前需要显示的view
        let currScene = null;
        scenes.forEach((page, index)=> {
            if (page.props.selected) {
                currScene = page;
                return;
            }
        });
        //render
        return (
            <View
                style={styles.container}
            >
                {currScene}
            </View>
        );
    }
}
const styles = StyleSheet.create({
    sceneContainer: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        paddingBottom: 49,
        backgroundColor: 'gray'
    },
    hiddenSceneContainer: {
        overflow: 'hidden',
        opacity: 0
    },
    container: {
        flex: 1
    }
});

这里简单解释一下，如果当前view需要显示的话就设置其style为：

  sceneContainer: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        paddingBottom: 49,
        backgroundColor: 'gray'
    },

不显示为：

 hiddenSceneContainer: {
        overflow: 'hidden',
        opacity: 0
    },

github上的demo是这样写的： 不管view显示还是不显示，只要显示过的view或者正要显示的view，都放 入container中，只是把它的透明度设置为了0，所以担心会很多view在一起会抢事件，对于没显示的view设置了一个属性为：

   //当前view为选中状态就设置其样式为sceneContainer
            let scene=null;
            if (child.props.selected) {
                scene = (
                    <View {...child.props} style={styles.sceneContainer} pointerEvents={'auto'} removeClippedSubviews={false}>
                        {child}
                    </View>
                )
            } else {//当前view为未选中状态就设置其样式为hiddenSceneContainer
                scene = (
                    <View {...child.props}style={styles.hiddenSceneContainer} pointerEvents={'none'} removeClippedSubviews={false}>
                        {child}
                    </View>
                )
            }

removeClippedSubviews

“当这一选项设置为true的时候，超出屏幕的子视图（同时overflow值为hidden）会从它们原生的父视图中移除。这个属性可以在列表很长的时候提高滚动的性能。默认为false。（0.14版本后默认为true）”

这是一个应用在长列表上极其重要的优化。Android上，overflow值总是hidden的，所以你不必担心没有设置它。而在iOS上，你需要确保在行容器上设置了overflow: hidden。

**pointerEvents
是字符串类型的属性, 可以取值 none,box-none,box-only,auto.**

none 发生在本组件与本组件的子组件上的触摸事件都会交给本组件的父组件处理.
box-none 发生在本组件显示范围内,但不是子组件显示范围内的事件交给本组件,在子组件显示范围内交给子组件处理
box-only 发生在本组件显示范围内的触摸事件将全部由本组件处理,即使触摸事件发生在本组件的子组件显示范围内
auto 视组件的不同而不同,并不是所有的子组件都支持box-none和box-only两个值,使用时最好测试下

好啦！！ 写了那么多了，我们来测试一下：

/**
 * @author YASIN
 * @version [PABank V01,17/5/17]
 * @date 17/5/17
 * @description TestComponent
 */

import React,{Component}from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image
}from 'react-native';
import TabNavitator from './MyTabNavitator';
import * as ScreenUtils from '../../Util/ScreenUtil';
export default class TestComponent extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            selected: '我的'
        };
      }
    render(){
        let self=this;
        return(
            <TabNavitator>
                <TabNavitator.Item
                    selected={self.state.selected==='我的'}
                    title='我的'
                    onPress={self._onItemPress.bind(self,'我的')}
                    renderIcon={() => <Image style={styles.iconStyle} source={{uri:'icon_tabbar_homepage'}} />}
                    renderSelectedIcon={() => <Image style={styles.iconStyle} source={{uri:'icon_tabbar_homepage_selected'}} />}
                    titleStyle={styles.titleStyle}
                    selectedTitleStyle={styles.selectedTitleStyle}
                >
                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}><Text style={styles.text}>我的</Text></View>
                </TabNavitator.Item>
                <TabNavitator.Item
                    selected={self.state.selected==='购物'}
                    title='购物'
                    onPress={self._onItemPress.bind(self,'购物')}
                    renderIcon={() => <Image style={styles.iconStyle} source={{uri:'icon_tabbar_homepage'}} />}
                    renderSelectedIcon={() => <Image style={styles.iconStyle} source={{uri:'icon_tabbar_homepage_selected'}} />}
                    titleStyle={styles.titleStyle}
                    selectedTitleStyle={styles.selectedTitleStyle}
                >
                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}><Text style={styles.text}>购物</Text></View>
                </TabNavitator.Item>
                <TabNavitator.Item
                    selected={self.state.selected==='商家'}
                    title='商家'
                    onPress={self._onItemPress.bind(self,'商家')}
                    renderIcon={() => <Image style={styles.iconStyle} source={{uri:'icon_tabbar_homepage'}} />}
                    renderSelectedIcon={() => <Image style={styles.iconStyle} source={{uri:'icon_tabbar_homepage_selected'}} />}
                    titleStyle={styles.titleStyle}
                    selectedTitleStyle={styles.selectedTitleStyle}
                >
                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}><Text style={styles.text}>商家</Text></View>
                </TabNavitator.Item>
            </TabNavitator>
        );
    };
    _onItemPress(title){
        this.setState({
            selected: title
        });
    }
}
const styles=StyleSheet.create({
    text:{
        color: 'red'
    },
    iconStyle: {
        width: ScreenUtils.scaleSize(40),
        height: ScreenUtils.scaleSize(40),
    },
    selectedTitleStyle: {
        color: 'orange'
    },
    titleStyle: {
        fontSize: ScreenUtils.setSpText(10),
        color: '#333333'
    }
});

我直接拿着标准的TabNavitator测试代码来测试的，可以看到页面中有“我的“、“购物“、“商家“，然后我们默认选中了“我的“，我们运行看一下效果：

这里写图片描述

然后我们把state换成商家：

 constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            selected: '商家'
        };

这里写图片描述

好啦！！ 可以看到，我们革命已经进行到一半啦～～～
接下来就只需要添加TabBar，然后添加Tab，然后根据Tab点击回调，最后设置state进行切换页面，

这里对TabNavitator做了一个小小的优化，之前是所有已经显示过的view或者正要显示的view都放在了container中，现在改为了，只有需要显示的view才显示：

 //选出当前需要显示的view
        let currScene = null;
        scenes.forEach((page, index)=> {
            if (page.props.selected) {
                currScene = page;
                return;
            }
        });
        //render
        return (
            <View
                style={styles.container}
            >
                {currScene}
            </View>
        );
    }

之前的代码为：

  //render
        return (
            <View
                style={styles.container}
            >
                {scenes}
            </View>
        );

所以有些小伙伴说TabNavitator切换的时候比较卡，对的，我也发现了，不知道是不是这个原因，还没测试的，真需要优化的话，我觉得每个单独的页面也得做处理了，比如说网络请求放在:

componentDidMount() {

    }

然后就是一些代码上的优化了。 嗯嗯～～～ 这一节先到这里了，有点长啊，欢迎入群～～～～～

vv_小虫
关注
专栏目录
react native 文字轮播的实现示例
10-18
主要介绍了react native 文字轮播的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-native系列(15)导航篇：底部导航TabNavigator参数及使用详解
@黄小泽的个人博客
03-09 3229
本篇主要介绍的是TabNavigator，假设你已经对它的用法已经有了基本的认识，或重新去官网看一下 官网地址：https://reactnavigation.org/zh-Hans/ 底部导航TabNavigator的效果类似于微信，效果图： TabNavigator生成的底部导航的结构，它包括4部分： 选项卡栏 选项卡 图标 标签文本 createBottomTabNav...
React Native 系列(九) -- Tab标签组件
weixin_30847865的博客
08-16 449
前言 本系列是基于React Native版本号0.44.3写的。很多的App都使用了Tab标签组件，例如QQ，微信等等，就是切换不同的选项，显示不同的内容。那么这篇文章将介绍RN中的Tab标签组件。 Tab标签 什么是Tab标签？(ps:我是这样叫的)，就拿微信来说吧，底部有4个选项卡，点击不同的按钮切换不同的内容。 在RN中有两个组件负责实现这样的效果，它们是: TabBarIOS...
React Native Tabs 开源项目教程
最新发布
gitblog_01180的博客
08-16 530
React Native Tabs 开源项目教程 react-native-tabsReact Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)项目地址:https://gitcode.com/gh_mirrors/re...
ReactNative——TabNavigator的深入了解，打造一个自定义的Tab
JiaoYang1024
05-05 1375
                                                      最近有一个类似图片中的需求，左右滑动来切换下方的列表。一开始看到，就想到React-Navigation中的TabNavigator，但是，这个图中的Tab与传统的Tab有一些区别，一般的Tab都是上面一个图标，下面一个文字（类似QQ，微信的底部导航）或者没有图标，单纯是一个文字。所以看到图...
react-native结合react-navigation之TabNavigator
热门推荐
好好学习
07-08 2万+
react-native开发需时肯定有tab的切换，或者页面的转调，当然用RN自身的Navigator也可以但是也不是那么方便react-navigation 就能满足很多大部分需求，如下图的三种切换方式，下面就说下TabNavigator 和StackNavigator的应用，才踏的一个坑，还是太年轻呀，横刀一撸！！！！ 主要的界面 用tab 切换即是TabNavigator， 切换如下...
推荐使用：跨平台Tab导航组件——TabNavigator
gitblog_00045的博客
05-12 313
推荐使用：跨平台Tab导航组件——TabNavigator react-native-tab-navigatorA tab bar that switches between scenes, written in JS for cross-platform support项目地址:https://gitcode.com/gh_mirrors/re/react-native-tab-navigat...
react-native滑动吸顶效果的实现过程
12-10
在React Native中，实现滑动吸顶效果是一个常见的需求，特别是在设计类似新闻应用或电商应用的首页时。本文主要探讨了在React Native中如何解决这一问题，以及在尝试过程中遇到的挑战。 首先，React Native（RN）的...
ReactNative简单仓库realm数据库组件实现
10-10
React Native简单仓库app的实现，用到了realm组件实现数据库的存储；还有到react-native-drawer抽屉组件实现删除功能。由于上传资源限制大小，未能上传整个项目代码，只上传了关键代码，望见谅。
react-native-reanimated：重新实现React Native的动画库
02-03
React原生复活重新实现React Native的动画库复活2在这里！ 查看我们的以获取更多信息React Native Reanimated为要在其之上构建的Animated库API提供了更全面的低级抽象，因此允许更大的灵活性，尤其是在基于手势的...
基于React Native 0.52实现轮播图效果
12-11
轮播图几乎是必备的效果，这里选择 react-native-swiper 来实现，效果如下图： 二、实现轮播图效果 1、通过npm安装react-native-swiper npm install react-native-swiper --save 2、在recommend.js引入react-...
React-Native 实现点击Tab标签切换Tab页面
07-29
React-Native tabbar 的简单使用
react-navigation之TabNavigator使用方法及附上超级详细样例代码
clf_programing
03-01 9749
react-navigation之TabNavigator使用方法及附上超级详细样例代码网上虽说有很多篇关于react-navigation的使用说明的文章和博客，不过我找了大半天也不见详细具体的使用方法，大部分都是介绍种种属性的，为此鄙人自告奋勇，整理了一份比较详细的有关react-navigation的使用样例代码，本篇文章继续介绍TabNavigator的使用方法。TabNavigator ...
react-native 头部tab切换可以实现滑动切换功能
九段刀客的博客
11-25 526
【代码】react-native 头部tab切换可以实现滑动切换功能。
reactnative 底部tab页面@react-navigation/bottom-tabs
XKFC1的博客
10-20 862
reactnative 底部tab页面@react-navigation/bottom-tabs
reactnavigation 点击底部tab怎么传递参数?
ln1010的博客
04-21 649
在这个示例中，我们使用了MaterialCommunityIcons组件来自定义底部导航栏的图标，使用了activeTintColor和inactiveTintColor来配置选中和未选中状态下的颜色，使用了screenOptions来配置每个Tab.Screen的默认选项。Tab.Navigator是React Navigation中用于创建底部导航栏的组件，它可以通过一些配置来自定义底部导航栏的样式和行为。tabBarOptions：配置底部导航栏的样式和行为，例如颜色、图标、标签等。
探索React Native的灵活导航：TabNavigator全面解析
gitblog_00255的博客
08-13 323
探索React Native的灵活导航：TabNavigator全面解析 react-native-tab-navigatorA tab bar that switches between scenes, written in JS for cross-platform support项目地址:https://gitcode.com/gh_mirrors/re/react-native-tab-...
react-native实现Tab切换
boy火巨的博客
01-11 9375
方法一：react-native-scrollable-tab-view 步骤： 1.安装下载： npm install react-native-scrollable-tab-view --save 2.引入： import ScrollableTabView , { ScrollableTabBar, DefaultTabBar } from "react-native-scroll...
react-native-tab-navigator 的使用
qq_40263927的博客
07-05 2570
react-native-tab-navigator 是兼容android 与 ios的底部菜单，非常好用。 App.js代码 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, V...
React Native 实现 Toast 弹出框的示例与自定义
ReactNative实现Toast的示例 ReactNative是一个基于React的框架，用于构建跨平台的移动应用程序。在ReactNative中，实现Toast的功能是非常重要的，因为它可以用于显示提示信息，并自动隐藏。在Android中，Toast是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值