• react-native实现Tab切换

    2019-01-11 11:36:42
    方法一:react-native-scrollable-tab-view 步骤: 1.安装下载: npm install react-native-scrollable-tab-view --save 2.引入: import ScrollableTabView , { ScrollableTabBar, DefaultTabBar } from "...

    方法一:react-native-scrollable-tab-view

    步骤:

    1.安装下载:

    npm install react-native-scrollable-tab-view --save

    2.引入:

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

    3.使用:(render中直接使用即可)

    <ScrollableTabView
        // style={styles.container}
        renderTabBar={()=> <DefaultTabBar />}
        tabBarBackgroundColor='#fff'
        tabBarActiveTextColor='#5ebfff'
        tabBarInactiveTextColor='#333'
        // tabBarUnderlineStyle={styles.lineStyle}
    >
        <Text  tabLabel='@我的'>@我的11</Text >
        <Text  tabLabel='回复我的'> 回复我的11</Text >
    </ScrollableTabView>

    方法二:react navigation

    步骤:

    1.引入:(react navigation中的组件以及所要跳转的组件)

    import {
      createAppContainer,
      createMaterialTopTabNavigator
    } from 'react-navigation';
    import { ReplyMeNewVisit } from './new/ReplyMeNewVisit'
    import { AtMeNewVisit } from './new/AtMeNewVisit'

    2.在要用到tab的主页面中进行定义一个路由:

    const TabContent= createMaterialTopTabNavigator (
    {
      AtMeNewVisitTab: {
        screen: AtMeNewVisit,
        navigationOptions: {
          tabBarLabel: '@我的',
        }
      },
      ReplyMeNewVisitTab: {
        screen: ReplyMeNewVisit,
          tabBarLabel: '回复我的',
        }
      }, 
    },
    {
      initialRouteName: 'AtMeNewVisitTab',
      swipeEnabled: true,
      animationEnabled: true,
      lazy: false,
      tabBarPosition:'top',
     }
    )
    

    3.仍旧在该页面中:定义一个容器:

    const TabInNewMeg = createAppContainer(TabContent);

    4.在tab切换的子页面中分别配置:

    static navigationOptions = ({ navigation, navigationOptions }) => {
        const { params } = navigation.state;
        return {
          tabBarLabel: '@我的',
        }
      }

    5.在tab的主页面中的class的render中引用:

    <TabInNewMeg/>

     

    展开全文
  • 功能: 使用React-native-tab-navigator(https://github.com/exponentjs/react-native-tab-navigator) 实现底部选项卡切换 ...在项目根目录下,运行:npm install react-native-tab-navigator –-...

    功能:

    使用React-native-tab-navigator(https://github.com/exponentjs/react-native-tab-navigator) 实现底部选项卡切换

    实现效果:

    在这里插入图片描述

    在这里插入图片描述

    实现过程:

    1、项目集成react-native-tab-navigator

    在项目根目录下,运行:npm install react-native-tab-navigator –-save
    

    2、核心代码:

    App.js代码

    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View,StatusBar,Image} from 'react-native';
    import {StackNavigator, TabNavigator, TabBarBottom} from 'react-navigation'
    
    import color from './widget/color'
    import TabBarItem from './widget/TabBarItem'
    
    import HomeScene from './scene/Home/HomeScene'
    import MineScene from './scene/Mine/MineScene'
    
    const lightContentScenes = ['Home', 'Mine']
    
    function getCurrentRouteName(navigationState: any) {
        if (!navigationState) {
            return null
        }
        const route = navigationState.routes[navigationState.index]
        // dive into nested navigators
        if (route.routes) {
            return getCurrentRouteName(route)
        }
        return route.routeName
    }
    
    type Props = {};
    export default class App extends Component<Props> {
        constructor() {
            super();
            StatusBar.setBarStyle('light-content')
        }
    
      render() {
        return (
            <Tab
                onNavigationStateChange={
                    (prevState, currentState) => {
                        const currentScene = getCurrentRouteName(currentState)
                        const previousScene = getCurrentRouteName(prevState)
                        if (previousScene !== currentScene) {
                            if (lightContentScenes.indexOf(currentScene) >= 0) {
                                StatusBar.setBarStyle('light-content')
                            } else {
                                StatusBar.setBarStyle('dark-content')
                            }
                        }
                    }
                }
            />
        )
      }
    }
    
    const Tab = TabNavigator(
        {
            Home: {
                screen: HomeScene,
                navigationOptions: ({navigation}) => ({
                    tabBarLabel: '首页',
                    tabBarIcon: ({focused, tintColor}) => (
                        <TabBarItem
                            tintColor={tintColor}
                            focused={focused}
                            normalImage={require('../res/img/tabbar/tabbar_homepage.png')}
                            selectedImage={require('../res/img/tabbar/tabbar_homepage_selected.png')}
                        />
                    )
                }),
            },
    
            Mine: {
                screen: MineScene,
                navigationOptions: ({navigation}) => ({
                    tabBarLabel: '我的',
                    tabBarIcon: ({focused, tintColor}) => (
                        <TabBarItem
                            tintColor={tintColor}
                            focused={focused}
                            normalImage={require('../res/img/tabbar/tabbar_mine.png')}
                            selectedImage={require('../res/img/tabbar/tabbar_mine_selected.png')}
                        />
                    )
                }),
            },
        },
        {
            tabBarComponent: TabBarBottom,
            tabBarPosition: 'bottom',
            lazy: true,
            animationEnabled: false,
            swipeEnabled: false,
            tabBarOptions: {
                activeTintColor: color.primary,
                inactiveTintColor: color.gray,
                style: {backgroundColor: '#ffffff'},
            },
        }
    )
    

    TabBarItem.js代码

    import React, { PureComponent } from 'react'
    import { Image } from 'react-native'
    
    type Props = {
        tintColor: any,
        normalImage:any,
        selectedImage:any,
        focused:boolean,
    }
    
    class TabBarItem extends PureComponent<Props> {
        render() {
            let selectedImage = this.props.selectedImage ? this.props.selectedImage : this.props.normalImage
            return (
                <Image
                    source={this.props.focused
                        ? selectedImage
                        : this.props.normalImage}
                    style={{ tintColor: this.props.tintColor, width: 25, height: 25 }}
                />
            )
        }
    }
    export default TabBarItem
    

    HomeScene.js代码

    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View} from 'react-native';
    
    export default class HomeScene extends Component{
        //UI渲染
        render() {
            //return不带()会报错
            return(
                <View style={styles.container}>
                    <Text style={styles.text}>我是首页</Text>
                </View>
            );
        }
    }
    
    //CSS样式
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        text:{
            fontSize:20,
        }
    });
    

    3、参数

    RouteConfigs,配置路由以及对应的 screen 页面, navigationOptions 为对应路由页面的配置选项:

    title - Tab标题,可用作 headerTitle 和 tabBarLabel 回退标题
    tabBarVisible - Tab的是否可见,没有设置的话默认为 true
    tabBarIcon - Tab的icon组件,可以根据 {focused: boolean, tintColor: string} 方法来返回一个icon组件
    tabBarLabel - Tab中显示的标题字符串或者组件,也可以根据 { focused: boolean, tintColor: string } 方法返回一个组件

    TabNavigatorConfig

    tabBarComponent - Tab选项卡组件,iOS默认为 TabBarBottom ,Android默认为 TabBarTop 。TabBarTop - 在页面的顶部,TabBarBottom - 在页面的底部.
    tabBarPosition - Tab选项卡的位置,有 top 或 bottom 两个值
    swipeEnabled - 是否可以滑动切换Tab选项卡
    animationEnabled - 点击Tab选项卡切换界面是否需要动画
    lazy - 是否懒加载页面
    initialRouteName - 初始显示的Tab对应的页面路由名称
    order - 用路由名称数组来表示Tab选项卡的顺序,默认为路由配置顺序
    paths - 路径配置
    backBehavior - androd点击返回键时的处理,有 initialRoute 和 none 两个值
    initailRoute - 返回初始界面
    none - 退出

    tabBarOptions - Tab配置属性,用在 TabBarTop 和 TabBarBottom 时有些属性不一致:
    用于 TabBarTop 时:
    activeTintColor - 选中的文字颜色
    inactiveTintColor - 未选中的文字颜色
    showIcon - 是否显示图标,默认显示
    showLabel - 是否显示标签,默认显示
    upperCaseLabel - 是否使用大写字母,默认使用
    pressColor - android 5.0以上的MD风格波纹颜色
    pressOpacity - android 5.0以下或者iOS按下的透明度
    scrollEnabled - 是否可以滚动
    tabStyle - 单个Tab的样式
    indicatorStyle - 指示器的样式
    labelStyle - 标签的样式
    iconStyle - icon的样式
    style - 整个TabBar的样式

    用于 TabBarBottom 时:
    activeTintColor - 选中Tab的文字颜色
    activeBackgroundColor - 选中Tab的背景颜色
    inactiveTintColor - 未选中Tab的的文字颜色
    inactiveBackgroundColor - 未选中Tab的背景颜色
    showLabel - 是否显示标题,默认显示
    style - 整个TabBar的样式
    labelStyle - 标签的样式
    tabStyle - 单个Tab的样式

    参考:https://www.cnblogs.com/CrazyWL/p/7283600.html

    展开全文
  • react native android使用react-native-tab-navigator来做底部导航tabor(1)
    1. github上的地址:https://github.com/exponentjs/react-native-tab-navigator
    2. 终端运行:npm install react-native-tab-navigator –save下载
    3. 导入,类似安卓,
      import TabNavigator from 'react-native-tab-navigator';
    4. 在render方法当中使用它:
    render() {
            return (
                <View style={styles.container} >
                    <TabNavigator>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === '首页'}
                            title="首页"
                            titleStyle={styles.tabText}
                            selectedTitleStyle={styles.selectedTabText}
                            renderIcon={() => <Image style={styles.icon} source={require("/images/ic_home_normal.png")} />}
                            renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_home_checked.png")} />}
                            onPress={() => this.setState({ selectedTab: '首页' })}>
                            <HomeComponent/>
                        </TabNavigator.Item>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === '消息'}
                            title="消息"
                            titleStyle={styles.tabText}
                            selectedTitleStyle={styles.selectedTabText}
                            renderIcon={() => <Image style={styles.icon} source={require("/images/ic_message_normal.png")} />}
                            renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_message_checked.png")} />}
                            onPress={() => this.setState({ selectedTab: '消息' })}>
                            <MessageComponent />
                        </TabNavigator.Item>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === '联系人'}
                            title="联系人"
                            titleStyle={styles.tabText}
                            selectedTitleStyle={styles.selectedTabText}
                            renderIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_normal.png")} />}
                            renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_checked.png")} />}
                            onPress={() => this.setState({ selectedTab: '联系人' })}>
                            <ContactComponent />
                        </TabNavigator.Item>
                    </TabNavigator>
                </View>
            );
        }

    其中可以自定义选中与未选中text和图标的样式,是不是很方便。
    HomeComponent, MessageComponent,ContactComponent为子页面,也要先import
    5. styles:

    let styles = StyleSheet.create({
        container: {
            flex: 1
        },
        tabText: {
            color: "#000000",
            fontSize: 13
        },
        selectedTabText: {
            color: "#999999",
            fontSize: 13
        },
        icon: {
            width: 20,
            height: 20
        }
    });

    这样就大功告成了

    展开全文
  • 实现效果如下: ...npm install react-native-tab-navigator --save 然后在需要做导航的文件引入: import TabNavigator from 'react-native-tab-navigator' 现在可以开始开发导航了,...

    实现效果如下:

              点击选项卡可以切换并且改变上面页面的颜色、选中图标的颜色、图标

     

    首先需要安装:

    npm install react-native-tab-navigator --save

    然后在需要做导航栏的文件引入:

    import TabNavigator from 'react-native-tab-navigator'

    现在可以开始开发导航栏了,这是我做的这个例子的完整代码:

    import React, {Component} from 'react';
    import {StyleSheet, View,Text,Image} from 'react-native';
    import TabNavigator from 'react-native-tab-navigator'
    
    export default class App extends Component<Props> {
      /*初始化state*/
      constructor(props){
          super();
          this.state={
            selectedTab:'tb_msg',
          }
      }
        /**
         * 公共组件方法
         * @param selectedTab 选中的tab
         * @param title
         * @param icon
         * @param selectedIcon
         * @param imageStyle  选中时渲染图标的颜色
         * @param mark  角标
         * @param viewContent  页面内容
         * @returns {*}
         */
      tabNavigatorItems(selectedTab,title,icon,selectedIcon,imageStyle,mark,viewContent){
          return (
              <TabNavigator.Item
                  selected={this.state.selectedTab === selectedTab }
                  title={title}
                  renderIcon={()=> <Image style={styles.myImage} source={icon}/> }
                  renderSelectedIcon={()=> <Image style={[styles.myImage,{tintColor:imageStyle}]} source={selectedIcon}/> }
                  badgeText={mark}
                  onPress={()=> this.setState({selectedTab:selectedTab}) }>
                  <View style={{flex:1}}><Text>{viewContent}</Text></View>
              </TabNavigator.Item>
          )
      }
    
      render() {
        return (
          <View style={styles.container}>
             <TabNavigator>
                {this.tabNavigatorItems('tb_msg',"消息",require('./images/msg.png'),require("./images/selected_msg.png"),'#ffe09a',"1","消息页面内容")}
                {this.tabNavigatorItems('tb_contacts',"联系人",require('./images/contacts.png'),require("./images/selected_contacts.png"),'#65bb74',"","联系人页面内容")}
                {this.tabNavigatorItems('tb_watch',"看点",require('./images/wacth.png'),require("./images/selected_watch.png"),'#6ebef3',"","看点页面内容")}
                {this.tabNavigatorItems('tb_dynamic',"动态",require('./images/dynamic.png'),require("./images/selected_dynamic.png"),'#622193',"","动态页面内容")}
             </TabNavigator>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#F5FCFF',
        },
        myImage:{
            width:22,
            height:22,
        }
    });
    
    

    下面是组件的属性和描述

    TabNavigator props:

    prop default type description
    sceneStyle inherited object (style) 场景样式,即Tab页容器的样式,可按View的style设置
    tabBarStyle inherited object (style) TabBar的样式,基本也可按照普通的style写法进行设置
    tabBarShadowStyle inherited object (style) TabBar阴影的样式,不过对于扁平化的设计,这个属性应该用处不大
    hidesTabTouch false boolean bool类型,即是否隐藏Tab按钮的按下效果

    TabNavigator.Item props:

    prop default type description
    renderIcon none function 即图标,但为function类型,所以这里需要用到Arrow Function
    renderSelectedIcon none function 选中状态的图标,非必填,也是function类型
    badgeText none string or number 即Tab右上角的提示文字,可为String或Number,类似QQ中Tab右上角的消息提示,非必填
    renderBadge none function 提示角标渲染方式,function类型,类似render的使用,非必填
    title none string 标题,String类型,非必填
    titleStyle inherited style 标题样式,style类型,非必填
    selectedTitleStyle none style 选中标题样式,style类型,非必填
    tabStyle inherited style styling for tab
    selected none boolean bool型,是否选中状态,可使用setState进行控制,默认false
    onPress none function 即点击事件的回调函数,这里需要控制的是state
    allowFontScaling false boolean bool型,是否允许字体缩放,默认false
    展开全文
  • 这篇文章主要介绍了react-native动态切换tab组件的方法,非常具有实用价值,需要的朋友可以参考下 在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换. 这些组件分成下面两种. 第一种非常简单,同时...

    在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.这篇文章主要介绍了react-native动态切换tab组件的方法,非常具有实用价值,需要的朋友可以参考下

    在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.

    这些组件分成下面两种.

    第一种非常简单,同时大多数第三方组件都能达到效果.这里重点讲述第二种,我们要让第二种组件不仅能左右滑动,同时还能够在点击的时候自动滑动,将点击的位置滑动到正中间.

    准备

    我们先来分析一波.一个滑动组件在APP上是一种什么状态.

    这里可以看出,tab组件需要考虑到长度超过APP的屏幕,并且在超过之后能够滑动.

    同时计算出当前位置需要滑动多少距离才能够将位置居中. 需要滑动的位置=点击位置的左边距-APP屏幕/2+点击位置的宽度/2

    这个公式也就是我们自动滑动的核心了.

    开发

    使用ScrollView组件承载tab项,这样就可以非常简单的达到滑动的效果.同时添加horizontaldirectionalLockEnabledshowsHorizontalScrollIndicatorsnapToAlignment几个属性.

    <ScrollView ref={e => this.scroll = e}
     horizontal directionalLockEnabled
     showsHorizontalScrollIndicator={false}
     snapToAlignment="center">
     {this.props.data.map((item, index) =>
      {/*具体项*/}
     )}//欢迎加入全栈开发交流圈一起学习交流:864305860
    </ScrollView>
    复制代码

    使用TouchableOpacity包裹内容项,同时调用setLaout方法将每个项的宽高等属性记录下来,为我们后面计算当前位置做准备.

    <TouchableOpacity onPress={() => this.setIndex(index)} 
     onLayout={e => this.setLaout(e.nativeEvent.layout, index)} 
     key={item.id} 
     style={tabBarStyle.itemBtn}>
      <Text style={[tabBarStyle.item, this.state.index === index ? tabBarStyle.active : null]} > {item.name}</Text>
      <View style={[tabBarStyle.line, this.state.index === index ? tabBarStyle.active2 : null]}>    </View>
    </TouchableOpacity>
    复制代码

    记录每个项渲染之后的位置,将这些值存在变量里,为后面计算做准备.

    laout_list = []
    setLaout(layout, index) {
     //存单个项的位置
     this.laout_list[index] = layout;
     //计算所有项的总长度
     this.scrollW += layout.width;
    }
    复制代码

    接下来就是点击自动变换位置的计算了.

    setIndex(index, bl = true) {
     //先改变点击项的颜色
     this.setState({ index })
     //兼容错误
     if (!this.scroll) return;
     //拿到当前项的位置数据
     let layout = this.laout_list[index];
     let rx = deviceWidth / 2;
     //公式
    //欢迎加入全栈开发交流圈一起学习交流:864305860
     let sx = layout.x - rx + layout.width / 2;
     //如果还不需要移动,原地待着
     if (sx < 0) sx = 0;
     //移动位置
     sx < this.scrollW - deviceWidth && this.scroll.scrollTo({ x: sx, animated: bl });
     //结尾部分直接移动到底
     sx >= this.scrollW - deviceWidth && this.scroll.scrollToEnd({ animated: bl });
     //触发一些需要的外部事件
     this.props.onChange && this.props.onChange(index);
    复制代码

    结语

    感谢您的观看,如有不足之处,欢迎批评指正。

    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    展开全文
  • 先上代码,配合代码讲解一下使用方法, 我这有用到一个屏幕适配工具类,自己写的,使用方法和代码 请点这里 ...import React from 'react'; import { Text, StyleSheet, View, TouchableOpacity, Image...
  • npm install react-native-tab-navigator --save 2、引入 import TabNavigator from 'react-native-tab-navigator'; 3、完整代码 import React, {Component} from 'react'; import { AppRegist...
  • React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。TabBarIOS,仅适用于IOS平台 ViewPagerAndroid,仅适用于Android平台(严格来讲并不算,因为我们还需要自己实现Tab)。在...
  • react-native-tab-navigator是一款Tab切换的库,细心的读者可能注意到了对于TabNavigator.Item选项卡部分,代码功能上基本上是重复的,对此,我们能不能对这种有相同功能的代码进行二次封装呢?代码示例主页面封装...
  • React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。TabBarIOS,仅适用于IOS平台 ViewPagerAndroid,仅适用于Android平台(严格来讲并不算,因为我们还需要自己实现Tab)。在...
  • react native android使用react-native-tab-navigator来做底部导航tabbar(2)一个坑:navigator
  • 写这篇文章的原因,就是产品经理希望在app下方的tab上悬浮一条提示,我们的app用的是RN的框架,于是我调研了一番如何去计算底部tab栏的高度。去RN的社区逛了一圈,发现目前没有官方的方法能够直接调用得到底部tab...
  • react-native-scrollable-tab-view是一款可以实现顶部的Tab切换和底切换的第三方库,常用于顶部Tab切换。 在HT项目中,我用其实现日周月年运动数据页面的切换,其效果如下图所示:     二、使用 2.1 准备...
  • import React, {PureComponent} from 'react'; import { SafeAreaView, Image, FlatList, Platform, BackHandler, View, Text, TextInput, Alert, ImageBackground, To...
  • React实现tab切换

    2017-03-29 23:25:31
    react tab 切换
  • import { NavigationActions, StackActions } from 'react-navigation'; const resetAction = StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Tabs'...
  • 大家好,今天讲一下如何实现自定义标题组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提交了开发效率。 标题是大多数应用界面必不可少的一...
  • react-native 顶部导航

    2019-03-19 14:31:50
    效果图: 项目结构如下: views和下面的页面手动创建 环境依赖如下: 步骤 下载 react-native-scrollable-tab-view $ npm install react-native-scrollable-tab-...
  • 从零学React Native之09可触摸组件 … 从零学React Native之03页面导航 …经过之前的学习, 我们可以完成一个自定义导航了, 效果如下: 我们需要创建一个 NaviBar.js 用来显示顶部的导航, 还需要四个界面(Page...
1 2 3 4 5 ... 20
收藏数 207,500
精华内容 83,000
关键字:

native react 百变tab栏