RN 标签导航TabNavigator

最新推荐文章于 2025-06-10 12:01:49 发布

xiashiqi_blog

最新推荐文章于 2025-06-10 12:01:49 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： RN知识梳理文章标签： RN TabNavigator

本文链接：https://blog.youkuaiyun.com/xiashiqi_blog/article/details/88317079

RN知识梳理专栏收录该内容

13 篇文章

订阅专栏

本文深入讲解React Native中TabNavigator的使用方法，包括导航栏分类、TabNavigator的应用场景及配置选项，如标签位置、动画效果、懒加载等。同时，提供了导航路由组件的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

RN 标签导航TabNavigator

- 一、导航栏分类
- 二、TabNavigator的应用

一、导航栏分类

StackNavigator: 类似于普通的Navigator，实现不同的页面进行跳转
TabNavigator: 屏幕上方或下方的标签栏，不同的tabs互相切换。
DrawerNavigator: 抽屉效果，侧边滑出

二、TabNavigator的应用

这里根组件是定义一个栈导航，在栈导航中嵌套了一个标签导航TabNavigatorDemo

const Root =StackNavigator(
  {
    DemoCollections:{screen:DemoCollections},
    IntelligentPage:{screen:IntelligentPage},
    NavBarDemo2:{screen:NavBarDemo2},
    NavBarDemo:{screen:NavBarDemo},
    AnimateDemo:{screen:AnimateDemo},
    AnimateDemo2:{screen:AnimateDemo2},
    TabViewExample:{screen:TabViewExample},
    ListViewSwiper:{screen:ListViewSwiper},
    FlatListDemo:{screen:FlatListDemo},
    TabNavigatorDemo:{screen:TabNavigatorDemo} //栈导航嵌套标签导航
  },
  {
    initialRouteName:'DemoCollections',
    headerMode:'none' //让导航栏隐藏
  }
);


AppRegistry.registerComponent('Wuba', () => Root);

2.标签导航TabNavigatorDemo的设置如下

const  TabNavigatorDemo = TabNavigator({
  Chat:{screen:Chat},
  Tong: {screen: Tong},
  Find: {screen: Find}
},{
  tabBarPosition: 'bottom', //设置标签栏在屏幕最上方还是最下方
  swipeEnabled: true,//是否允许通过手势滑动来切换标签页
  animationEnabled: true,//标签页切换时是否有动画效果
  lazy: true,//是否只渲染需要显示的标签页
  initialRouteName:'Tong',//初始标签页的名称
  backBehavior: 'none',//Android默认返回initialRouteName指向的标签页，将backBehavior指向为非initialRouteName值将让返回键直接结束应用
  tabBarOptions: //用来配置标签栏
    {
    activeTintColor: '#4BC1D2', //标签栏激活时的染色
    inactiveTintColor: '#000', //标签非栏激活时的染色
    showIcon: true, //是否显示标签图标
    showLabel: true, //是否显示标签栏
    upperCaseLabel: false,//标签英文是否大写
    pressColor: '#788493',//android按下时涟漪效果的颜色
    pressOpacity: 0.8,//按下标签时的透明度
    style: {//标签栏样式
      backgroundColor: '#fff',
      height:60
    },
    labelStyle: {//标签样式
      fontSize: 12
    },
    indicatorStyle: {height: 0}
  }
});

其中TabNavigator（RouteConfigs,TabNavigatorConfig)接口的RouteConfigs部分和StackNavigator的完全一样。TabNavigatorConfig的各个参数如代码注释

3.导航路由组件的代码示意

class Chat extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>聊天界面</Text>
      </View>
    );
  }
  static navigationOptions = {
    tabBarLabel: '聊天',
    tabBarIcon: ({ focused }) =>
    {
      if (focused) {
        return (
          <Image style={styles.tabBarIcon} source={{uri:'https://img.58cdn.com.cn/escstatic/fecar/pmuse/intelligent_guide/sellcar.png'}}/>
        );
      }
      return (
        <Image style={styles.tabBarIcon} source={{uri:'https://img.58cdn.com.cn/escstatic/fecar/pmuse/inteliigent_guide/%E4%BC%B0%E8%BD%A6%E4%BB%B7%E5%BA%95%E9%83%A8%E5%B0%8F%E5%9B%BE@2x.png'}}/>
      );
    },
  };
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabBarIcon: {
    width: 30,
    height: 30
  }
});

最终效果如下图
在这里插入图片描述