ReactNative之TabBariOS（十一）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNative之TabBariOS

• 目前主流的App,底部都有一个选项条，这个就需要用TabBariOS实现
• 一行代码，就会底部有条

<TabBarIOS></TabBarIOS>

• 常用属性

barTintColor string：标签栏的背景颜色。

style：样式

tintColor string：  当前被选中的标签图标的颜色。

unselectedItemTintColor string：  当前没有被选中的标签图标的颜色。仅在iOS 10及以上版本有效

translucent bool： 一个布尔值，决定标签栏是否需要半透明化。

如何添加选项卡

• TabBarIOS.Item
  • 注意：TabBarIOS.Item必须包装一个View,作为点击tabBar按钮，切换的View

<TabBarIOS.Item title='消息'
                                icon={{uri:'tab_recent_nor'}}
                                badge={10}
                >
                    <View>
                        <Text>消息</Text>
                    </View>
                </TabBarIOS.Item>

• 常用属性

badge string, number :在图标右上角显示一个红色的气泡。

icon Image.propTypes.source  :给当前标签指定一个自定义的图标。如果定义了systemIcon属性， 这个属性会被忽略。

onPress function :当此标签被选中时调用。你应该修改组件的状态来使得selected={true}。

selected bool :这个属性决定了子视图是否可见。如果你看到一个空白的页面，很可能是没有选中任何一个标签。

selectedIcon Image.propTypes.source :当标签被选中的时候显示的自定义图标。如果定义了systemIcon属性，这个属性会被忽略。如果定义了icon而没定义这个属性，在选中的时候图标会染上蓝色。

systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') :一些预定义的系统图标。注意如果你使用了此属性，标题和自定义图标都会被覆盖为系统定义的值。

title string :在图标下面显示的标题文字。如果定义了systemIcon属性，这个属性会被忽略

选中按钮，切换界面

• 只要设置对应的tabBarItem的selected为true,就会自动跳转到对应界面

  • 注意：tabBarItem的selected属性不能写死，可以搞个角标记录当前选中那个角标

• 监听tabBarItem的点击，修改selected属性

• 使用

• 1.订阅角标属性

 constructor(props){
        super(props);
        this.state = {
            selectIndex:0
        }
    }

• 2.监听tabBar点击，修改选中角标

onPress={()=>{
              this.setState({
              selectIndex:0
               })
             }}
                            

• 3.select属性根据角标判断

selected={0==this.state.selectIndex}

应用整体代码

render() {
        return (
            <TabBarIOS>
                <TabBarIOS.Item title='消息'
                                icon={{uri:'tab_recent_nor'}}
                                badge={10}
                                onPress={()=>{
                                    this.setState({
                                        selectIndex:0
                                    })
                                }}
                                selected={0==this.state.selectIndex}
                >
                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                        <Text>消息</Text>
                    </View>
                </TabBarIOS.Item>
            </TabBarIOS>

        )
    }