react native之TabBar底部导航(兼容Android和IOS)--react-native

react native之TabBar底部导航(兼容Android和IOS)-- react-native-tab-navigator

1.下载依赖

npm install react-native-tab-navigator --save

具体如何使用查看node_modules找到该组件查看README和点开里面的js查看所可以设置的属性

```js
import TabNavigator from 'react-native-tab-navigator';
```

This is an example of how to use the component and some of the commonly used props that it supports:

```js
<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}   //选中的状态
    title="Home"   //Tabbar的文字
    renderIcon={() => <Image source={...} />}  //TabBar的图标，注意要设置大小
    renderSelectedIcon={() => <Image source={...} />}  //TabBar选中时候的图标，注意要设置大小
    badgeText="1"   //右上角的字
    onPress={() => this.setState({ selectedTab: 'home' })}
    titleStyle={{color:"red”}}   //未选中状态文字的大小
    selectedTitleStyle={{color:"green”}}  //选中状态文字的大小
  >
    <HomeView/>
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}   //选中的状态
    title="Profile"   //Tabbar的文字
    renderIcon={() => <Image source={...} />}  //TabBar的图标，注意要设置大小
    renderSelectedIcon={() => <Image source={...} />} //TabBar选中时候的图标，注意要设置大小
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}
    titleStyle={{color:"red”}}   //未选中状态文字的大小
    selectedTitleStyle={{color:"green”}}  //选中状态文字的大小
  >
    <ProfileView/>
  </TabNavigator.Item>
</TabNavigator>
```

See TabNavigatorItem's supported props for more info.

### Hiding the Tab Bar

You can hide the tab bar by using styles. For example:
```js
let tabBarHeight = 0;
<TabNavigator
  tabBarStyle={{ height: tabBarHeight,overflow: 'hidden' }}
  sceneStyle={{ paddingBottom: tabBarHeight }}
/>
```

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!