RN 第三方组件TabNavigator底部导航栏

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

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

1.首先通过命令行将组件引入项目：

进入项目根目录并执行

[java] view plain copy

print ?

1. npm install react-native-tab-navigator –save  

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

执行完毕后组件就已导入，可以在根目录下的package.json的依赖中找到：

[java] view plain copy

print ?

1. ”dependencies”: {  
2.     ”react”: “15.3.2”,  
3.     ”react-native”: “0.37.0”,  
4.     ”react-native-tab-navigator”: “^0.3.3”  
5.   },  

"dependencies": {
    "react": "15.3.2",
    "react-native": "0.37.0",
    "react-native-tab-navigator": "^0.3.3"
  },

然后在js文件中引入：

[java] view plain copy

print ?

1. import TabNavigator from ‘react-native-tab-navigator’;  

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

2.使用方法：

先看代码：

[javascript] view plain copy

print ?

1. <TabNavigator  
2.                     tabBarStyle={{height:60}}  
3.                     style={{flex:1}}>  
4.                     <TabNavigator.Item  
5.                         title=”home”  
6.                         selected={this.state.tab==‘home’}  
7.                         onPress={()=>this.setState({tab:‘home’})}  
8.                         badgeText=”122”  
9.                         renderIcon={()=><Image  
10.                             style={{width:40,height:33}}  
11.                             source={require(’./img/chat.png’)}></Image>}  
12.                         >  
13.                         {home}  
14.                     </TabNavigator.Item>  
15.                     <TabNavigator.Item  
16.                         title=”second”  
17.                         selected={this.state.tab==‘second’}  
18.                         onPress={()=>this.setState({tab:‘second’})}  
19.                         renderIcon={()=><Image  
20.                             style={{width:40,height:33}}  
21.                             source={require(’./img/contact.png’)}></Image>}  
22.                         >  
23.                         {second}  
24.                     </TabNavigator.Item>  
25.                 </TabNavigator>  

<TabNavigator
                    tabBarStyle={{height:60}}
                    style={{flex:1}}>
                    <TabNavigator.Item
                        title="home"
                        selected={this.state.tab=='home'}
                        onPress={()=>this.setState({tab:'home'})}
                        badgeText="122"
                        renderIcon={()=><Image
                            style={{width:40,height:33}}
                            source={require('./img/chat.png')}></Image>}
                        >
                        {home}
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        title="second"
                        selected={this.state.tab=='second'}
                        onPress={()=>this.setState({tab:'second'})}
                        renderIcon={()=><Image
                            style={{width:40,height:33}}
                            source={require('./img/contact.png')}></Image>}
                        >
                        {second}
                    </TabNavigator.Item>
                </TabNavigator>

TabNavigator作为根布局，内含多个Item组件，Item除给出自身的导航栏属性外，还包含一个内容组件，也就是选中该项后页面显示的内容。这不同于安卓中通过对导航栏选中事件的监听来决定显示内容的思想，这里直接将要显示的东西和对应的导航绑定在一起。

重点是Item的几个属性,

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

renderIcon就是显示的图标，接收一个函数，返回一个View,这里直接返回图片，注意宽高要指定，不会自动缩放，

还有renderSelectedIcon用来作为选中时显示的图标，但是默认使用上面的属性选中时高亮，效果较好，也就用不到这个属性了

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

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

badgeText是图标右上角显示的badge文本内容，也可以通过renderBadge接收一个函数，返回自定义的Badge视图

还有要注意的是底部导航栏的高度是自适应图标和文字的，不包含badge，所以badge内容无法完全显示。可以设置navigator的属性tabBarStyle来指定导航栏的高度。         

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

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

1.首先通过命令行将组件引入项目：

进入项目根目录并执行

[java] view plain copy

print ?

1. npm install react-native-tab-navigator –save  

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

执行完毕后组件就已导入，可以在根目录下的package.json的依赖中找到：

[java] view plain copy

print ?

1. ”dependencies”: {  
2.     ”react”: “15.3.2”,  
3.     ”react-native”: “0.37.0”,  
4.     ”react-native-tab-navigator”: “^0.3.3”  
5.   },  

"dependencies": {
    "react": "15.3.2",
    "react-native": "0.37.0",
    "react-native-tab-navigator": "^0.3.3"
  },

然后在js文件中引入：

[java] view plain copy

print ?

1. import TabNavigator from ‘react-native-tab-navigator’;  

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

2.使用方法：

先看代码：

[javascript] view plain copy

print ?

1. <TabNavigator  
2.                     tabBarStyle={{height:60}}  
3.                     style={{flex:1}}>  
4.                     <TabNavigator.Item  
5.                         title=”home”  
6.                         selected={this.state.tab==‘home’}  
7.                         onPress={()=>this.setState({tab:‘home’})}  
8.                         badgeText=”122”  
9.                         renderIcon={()=><Image  
10.                             style={{width:40,height:33}}  
11.                             source={require(’./img/chat.png’)}></Image>}  
12.                         >  
13.                         {home}  
14.                     </TabNavigator.Item>  
15.                     <TabNavigator.Item  
16.                         title=”second”  
17.                         selected={this.state.tab==‘second’}  
18.                         onPress={()=>this.setState({tab:‘second’})}  
19.                         renderIcon={()=><Image  
20.                             style={{width:40,height:33}}  
21.                             source={require(’./img/contact.png’)}></Image>}  
22.                         >  
23.                         {second}  
24.                     </TabNavigator.Item>  
25.                 </TabNavigator>  

<TabNavigator
                    tabBarStyle={{height:60}}
                    style={{flex:1}}>
                    <TabNavigator.Item
                        title="home"
                        selected={this.state.tab=='home'}
                        onPress={()=>this.setState({tab:'home'})}
                        badgeText="122"
                        renderIcon={()=><Image
                            style={{width:40,height:33}}
                            source={require('./img/chat.png')}></Image>}
                        >
                        {home}
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        title="second"
                        selected={this.state.tab=='second'}
                        onPress={()=>this.setState({tab:'second'})}
                        renderIcon={()=><Image
                            style={{width:40,height:33}}
                            source={require('./img/contact.png')}></Image>}
                        >
                        {second}
                    </TabNavigator.Item>
                </TabNavigator>

TabNavigator作为根布局，内含多个Item组件，Item除给出自身的导航栏属性外，还包含一个内容组件，也就是选中该项后页面显示的内容。这不同于安卓中通过对导航栏选中事件的监听来决定显示内容的思想，这里直接将要显示的东西和对应的导航绑定在一起。

重点是Item的几个属性,

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

renderIcon就是显示的图标，接收一个函数，返回一个View,这里直接返回图片，注意宽高要指定，不会自动缩放，

还有renderSelectedIcon用来作为选中时显示的图标，但是默认使用上面的属性选中时高亮，效果较好，也就用不到这个属性了

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

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

badgeText是图标右上角显示的badge文本内容，也可以通过renderBadge接收一个函数，返回自定义的Badge视图

还有要注意的是底部导航栏的高度是自适应图标和文字的，不包含badge，所以badge内容无法完全显示。可以设置navigator的属性tabBarStyle来指定导航栏的高度。