React Native入门(十)之导航组件React Navigation(2)TabNavigator

前端之家收集整理的这篇文章主要介绍了React Native入门(十)之导航组件React Navigation(2)TabNavigator前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_1@前言

上一篇博客,了解了React Navigation导航库的StackNavigator的用法,主要用来页面跳转标题栏的设置!本篇就来了解一下这个导航库中第二个组件TabNavigator的用法

使用

TabNavigator组件呢,看名字Tab就大致可以知道它是一个标签式的导航组件。这个组件呢在Android和iOS平台有不同的显示效果,而且呢在Android平台默认是在上边,(非常类似TabLayout),在iOS平台是在下边显示
好,下边来看一下简单的使用:

import {TabNavigator} from "react-navigation";//先引入组件

@H_404_18@class NewsScreen @H_404_18@extends Component {
  render() {
    @H_404_18@return <FlatList
      style={{padding: 10}}
      data={[{key: '第一条新闻'},{key: '第二条新闻'},{key: '第三条新闻'},{key: '第四条新闻'},{key: '第五条新闻'},]}
      renderItem={({item}) => {
        @H_404_18@return (
          <Text style={{padding: 5,fontSize: 15}}>{item.key}</Text>
        )
      }}
    />
  }
}

@H_404_18@class VideoScreen @H_404_18@extends Component {
  render() {
    @H_404_18@return <Text>视频列表</Text>
  }
}

//设置TabNavigator
@H_404_18@const MainScreenNavigator = TabNavigator({
  新闻: {screen: NewsScreen},视频: {screen: VideoScreen},})

AppRegistry.registerComponent('AwesomeProject',() => MainScreenNavigator );

使用呢,非常简单,首先引入组件,然后写两个Tab页面,然后使用TabNavigator()设置路由即可!

一个简单的TabNavigator导航就完成了!

配置

当然,我们在具体使用的时候不会就这么简单的使用默认的样式等内容,我们可以自己配置需要的内容

TabNavigator(RouteConfigs,TabNavigatorConfig)

RouteConfigs路由设置

路由设置呢,这里就不再提了,具体的跟前边 StackNavigator中的路由设置配置一样!
需要了解的可以参考上一篇文章!或者到官网查看相关API!

TabNavigatorConfig标签导航设置

  • tabBarComponent - 自定义组件来设置自己的tab bar
  • tabBarPosition - 设置tab bar的位置,可以是 ‘top’ 或者 ‘bottom’
  • swipeEnabled - 是否允许滑动切换tab
  • animationEnabled - 在切换tab时是否展示动画
  • lazy - 是否懒加载
  • tabBarOptions - tab bar的设置选项

下边的可选项可传递到潜在路由来改变导航逻辑:

  • initialRouteName - 第一次加载时初始化tab的路由名字
  • order - 定义tabs顺序的路由名字数组
  • paths - 重写routeConfigs.
  • backBehavior-设置返回键的行为

tabBarOptions选项

在我们自己没有设置tabBarComponent的情况下,默认iOS平台下是TabBarBottom,Android平台下是TabBarTop !两个平台的tabbar设置的参数不同,这里说一下Android平台的TabBarTop可以设置的参数,iOS平台的设置参数可以到官网查看:tabBarOptions for TabBarBottom (default tab bar on iOS)

下面是Android平台默认的TabBarTop可以设置的参数:

  • activeTintColor - 选中标签的label和icon颜色
  • inactiveTintColor - 非选中标签的label和icon颜色
  • showIcon - 是否显示tab的icon,默认为false
  • showLabel - 是否显示tab的label,默认为true
  • upperCaseLabel - 是否将label显示为大写,默认为true(这里要是英文的话,会全部大写)
  • pressColor - 按压tab时的波纹效果颜色(Android >= 5.0 only)
  • pressOpacity - 按压tab时的透明度(iOS and Android < 5.0 only)
  • scrollEnabled - 设置是否可以滑动
  • tabStyle - 设置每一个tab的样式
  • indicatorStyle - 设置tab下边指示器的样式
  • labelStyle - 设置tab的label的样式
  • iconStyle - 设置tab的icon的样式
  • style - 设置整个tab bar的样式

好了,上边基本上就是TabNavigator全部的内容了!
下面,我们结合StackNavigator来看一个完整的例子:
先来看一下效果

demo:

import {TabNavigator} from "react-navigation";//引入

@H_404_18@class NewsScreen @H_404_18@extends Component {
  render() {
    @H_404_18@const {navigate} = this.props.navigation;
    @H_404_18@return <FlatList
      style={{padding: 10}}
      data={[{key: '第一条新闻'},]}
      renderItem={({item}) => {
        @H_404_18@return (
          <TouchableOpacity
            activeOpacity={0.5}
            //点击列表,@R_1000_404@面且传值
            onPress={() => navigate('NewsContent',{hello: item.key})}>
            <Text style={{padding: 5,fontSize: 15}}>{item.key}</Text>
          </TouchableOpacity>
        )
      }}
    />
  }
}

@H_404_18@class NewsContentScreen @H_404_18@extends Component {
  render() {
    @H_404_18@const {params} = this.props.navigation.state;
    @H_404_18@return (
      <View style={{padding: 10}}>
        //得到传递的数据
        <Text style={{fontSize: 20,fontWeight: 'bold',alignSelf: 'center'}}>{params.hello}</Text>
        <Text>
          我是具体的新闻内容!{'\n'}
          啊啊啊啊啊啊啊啊啊啊啊啊{'\n'}
          ...
        </Text>
      </View>
    );
  }
}

@H_404_18@class VideoScreen @H_404_18@extends Component {
  render() {
    @H_404_18@return <Text>视频列表</Text>
  }
}

//设置TabNavigator
@H_404_18@const MainScreenNavigator = TabNavigator({
  新闻: {screen: NewsScreen},},{
  tabBarPosition:'top',//设置位置
  tabBarOptions: {
    activeTintColor:'firebrick',//设置选中标签颜色
    inactiveTintColor:'gray',//设置非选择标签颜色
    labelStyle: {//设置标签label样式
      fontSize: 15,indicatorStyle:{//设置标签指示器样式
      backgroundColor:'firebrick'
    },/*tabStyle: { width: 100,//设置每一个tab的宽度,如果不设置则默认均分 },*/
    style: {//设置整个tab bar的样式
      backgroundColor: 'white',}
});

//设置StackNavigator
@H_404_18@const SimpleApp = StackNavigator({
  Home: {
    screen: MainScreenNavigator,navigationOptions: {
      title: '今日头条',//设置导航栏的标题
      headerTintColor:'white',//设置header的渲染颜色
      /*headerTitleStyle:{ color:'white' //这里和上边设置颜色是一样的,用其中一个即可 },*/
      headerStyle:{//设置header的样式
        backgroundColor:'firebrick',}
    }
  },NewsContent: {
    screen: NewsContentScreen,navigationOptions: ({navigation}) => ({
      title: `${navigation.state.params.hello}`,}),});

AppRegistry.registerComponent('AwesomeProject',() => SimpleApp);

结语

本篇文章了解了导航组件库React Navigation中TabNavigator标签组件的使用,并结合上一篇中的StackNavigator写了一个简单的demo。下一篇文章会来了解一下最后一个DrawerNavigator的用法! 好了,先这样,下一篇再见!

猜你在找的React相关文章