对于一款App来说,TabBar
可谓是最基本的一个组件了,在绝大部分的App上都能看到它的身影,要想使用RN实现这一基本组件,RN官方针对IOS已经提供了TabBarIOS
这个组件,但是此组件并不适合Android平台,而且官方对于Android也是一直没有与之对应的TtabBar`组件,所以想要实现这一功能,只能借助第三方了。
这里我想要介绍的是一个名为react-native-tab-navigator
的组件,在github上的地址是 react-native-tab-navigator
首先看一下效果图:
底部那三个tab就是要使用react-native-tab-navigator
实现的效果了。
具体步骤如下:
1. 首先引入模块包
- 安装
npm install react-native-tab-navigator –save
- 引入到项目中
import TabNavigator from ‘react-native-tab-navigator’
2. 使用
基本使用如下:
<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>
这是官方给出的最基本的例子,显然不能满足绝大多数的场景,但是我们自己动手改一改也就成了。
例如我在一开始给出的那个效果中,就是我自己动手优化后的效果,具体代码如下:
<TabNavigator tabBarStyle={styles.tab}>
<TabNavigatorItem
selected={this.state.selectedTab==='List'}
renderIcon={()=><Icon name="ios-videocam-outline" size={30} color="#4F8EF7" />}
renderSelectedIcon={()=><Image source={require('./my-icon.png')} />}
onPress={()=>this.setState({selectedTab:'List'})}>
<Text>这是List页面</Text>
</TabNavigatorItem>
<TabNavigatorItem
selected={this.state.selectedTab==='Edit'}
renderIcon={()=><Icon name="ios-recording-outline" size={30} color="#4F8EF7" />}
renderSelectedIcon={()=><Icon name="ios-recording" size={30} color="#4F8EF7" />}
onPress={()=>this.setState({selectedTab:'Edit'})}>
<Text>这是Edit页面</Text>
</TabNavigatorItem>
<TabNavigatorItem
selected={this.state.selectedTab==='Account'}
renderIcon={()=><Icon name="ios-more-outline" size={30} color="#4F8EF7" />}
renderSelectedIcon={()=><Icon name="ios-more" size={30} color="#4F8EF7" />}
onPress={()=>this.setState({selectedTab:'Account'})}>
<Accoun/>
</TabNavigatorItem>
</TabNavigator>
其中,<Accoun/>
组件,是从外部引入的页面,类似于前面的<Text></Text>
组件,点击对应的TabBar
就能显示出<Accoun/>
组件中的页面来。
至于TabBar
上图标的选择,一种是你可以自己选定图片,例如上面的<Image source={require('./my-icon.png')} />
第二种就是使用第三方图标,我这里推荐使用react-native-vector-icons
,使用方法也很简单,如同上面的<Icon name="ios-videocam" size={30} color="#4F8EF7" />
,这个组件库几乎可以满足任何场景下的图标展示,具体可以参照 ionicons.com