朋也的博客 » 首页 » 文章

react-native TabNavigator用法

作者：朋也
日期：2017-09-06
类别：react-native学习笔记 

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）

TabNavigator 也是react-navigation包下的，用法也相当简单

const ITNewsTabNavigator = TabNavigator({
  Main: {
    screen: HomeComponent,
    navigationOptions: {
      title: 'IT资讯',
      headerTitle: 'IT资讯',
      tabBarLabel: "IT资讯",
      tabBarIcon: ({tintColor}) => (
        <Icon
          name="home"
          size={24}
          color={tintColor}
        />
      )
    }
  },
  User: {
    screen: UserComponent,
    navigationOptions: {
      title: '我的',
      headerTitle: '我的',
      tabBarLabel: "我的",
      tabBarIcon: ({tintColor}) => (
        <Icon
          name="user"
          size={24}
          color={tintColor}
        />
      )
    }
  }
}, {
  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  backBehavior: 'none',
})

这样就可以得到一个底部有两栏的一个布局，效果图可见 https://github.com/atjiu/ITNews-React-Native

说明：

代码： https://github.com/atjiu/ITNews-React-Native

相关文章