react-navigation之TabNavigator的用法

最新推荐文章于 2024-08-13 08:46:46 发布

孙朝阳

最新推荐文章于 2024-08-13 08:46:46 发布

阅读量1.1k

点赞数

分类专栏： React Native React Native 文章标签： react-native react-navigation

本文链接：https://blog.csdn.net/chaoyangsun/article/details/79347565

版权

React Native 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

React Native

6 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在React Native中使用TabNavigator，结合之前关于StackNavigator的内容，讲解了这两种导航器的配合使用。并提供了官方API链接以及一个全面的GitHub示例项目供参考。

摘要由CSDN通过智能技术生成

前面写了一篇StackNavigator的用法http://blog.csdn.net/chaoyangsun/article/details/79262203
本文主要介绍TabNavigator的用法，官方API https://reactnavigation.org/docs/tab-navigator.html
一般情况下TabNavigator和StackNavigator配合来用，用法如下：

const App = TabNavigator(
  {
  Main:{
    screen:MainStack,
    navigationOptions:{//设置单个tab样式
      tabBarIcon:({focused}) => {
        const p = focused ? require('./img/smile.png') : require('./img/cry.png');//根据焦点加载不同的图片
        return <Image source={p} style={styles.img}/>;
      }
    }
  },
  Middle:{
    screen:MiddleStack,
    navigationOptions: ({navigation}) => ({
      tabBarIcon:({focused,tintColor}) => {
        const p = focused ? require('./img/in_mid.png') : require('./img/out_mid.png');
        return <Image source={p} style={styles.img}/>;
      }
    })
  },
  Settings:{
    screen:SettingsStack,
    navigationOptions: ({navigation}) => ({
      tabBarIcon:({focused,tintColor}) => {
        const p = focused ? require('./img/in_set.png') : require('./img/out_set.png');
        return <Image source={p} style={styles.img}/>;
      }
    })
  }
},//上面这些设置各个tab对应的界面，可能是一个界面，也可能是一个StackNavigator
{
  tabBarOptions:{
    style: {
           height:49
       },
    activeTintColor:'#1092ee',//有焦点时的颜色
    inactiveTintColor:'gray',//无焦点时的颜色
  },
  tabBarComponent:TabBarBottom,
  tabBarPosition:'bottom',//tab的位置，默认在上面
  swipeEnabled:false,
  animationEnabled:false,
},//上面这些是设置tab样式，详细可查看API
);
export default App;