-- --
正在获取
我的小世界 新手码农的小世界
详谈React-Native 组件底部导航栏react-native-tab-navigator
发表于 2018-3-13 | | APP开发

最近学习开发已经到了底部导航了,所以就来谈谈这个底部导航的组件吧

TabNavigator是github上开源的一个rn组件,是适用于ios和安卓两个平台的底部导航栏。

就目前来说,实用度很高。github上最近更新是7个月前,目前版本0.3.4

组件地址:https://github.com/expo/react-native-tab-navigator

  1. 组件安装   
  • 首先通过命令行将组件引入项目:
  • 进入项目根目录并执行
    1. npm install react-native-tab-navigator --save  
    执行完毕后组件就已导入,可以在根目录下的package.json的依赖中找到:
  • "dependencies": {
        "react": "16.2.0",
        "react-native": "^0.51.0",
        "react-native-smartbar": "^0.1.5",
        "react-native-tab-navigator": "^0.3.4"
    }

  2.然后在js文件中引入:

  1. import TabNavigator from 'react-native-tab-navigator';  
  3.使用方法:  
<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

此外,此组建亦可隐藏底部导航,如下示例   













let tabBarHeight = 0;
<TabNavigator
  tabBarStyle={{ height: tabBarHeight, overflow: 'hidden' }}
  sceneStyle={{ paddingBottom: tabBarHeight }}
/>

TabNavigator作为根布局,内含多个Item组件,Item除给出自身的导航栏属性外,

还包含一个内容组件,也就是选中该项后页面显示的内容。这不同于安卓中通过

对导航栏选中事件的监听来决定显示内容的思想,这里直接将要显示的东西和对

应的导航绑定在一起。

重点是Item的几个属性


title就是图标底部显示的文字,字体颜色等不必指定,默认效果已经比较好了


renderIcon就是显示的图标,接收一个函数,返回一个View,这里直接返回图片,

注意宽高务必要指定,这边不会自动缩放,


还有renderSelectedIcon用来作为选中时显示的图标,但是默认使用上面的属性

选中时高亮,效果较好,也就用不到这个属性了


onPress不用说,我这里用来为state赋值,从而将点击事件和selected属性联系起来


selected自然就是指定是否选中,这里通过返回state的比较结果确定


badgeText是图标右上角显示的badge文本内容,也可以通过renderBadge接收一个

函数,返回自定义的Badge视图



还有要注意的是底部导航栏的高度是自适应图标和文字的,不包含badge,所以badge

内容无法完全显示。可以设置navigator的属性tabBarStyle来指定导航栏的高度。

示例图:

评论:

乐泰胶水
2018-06-05 14:36
用胶水就用可赛新胶水和乐泰胶水这才是正确的选择https:www.hyhaote.com

发表评论:


GO