React Native 学习之TabBarIOS

Demo展示

TabBarIOS.gif

现在大多数Android和ios的App基本上都有TabBar来进行界面切换，而我们今天学习的TabBarIOS也可以实现这样的效果，但只适用于ios，若要在双平台都实现的话，可以用这个开源框架react-native-tab-navigator。今天我们先简单的来学习TabBarIOS的用法

知识点

• TabBarIOS

上面的Demo中，它的布局比较简单，上面一个View，下面就是一个TabBarIOS。图中最下方的tabBar的颜色为白色，选中时的图片为红色，可以通过TabBarIOS的两个属性来完成:

barTintColor  color  设置tab条的背景颜色

tintColor color  设置tab条上被选中图标的颜色

• TabBarIOS.Item

上面的图片中，tabBar的item数量为4，那么tabBar的item由什么表示了？那就是TabBarIOS.Item。我们来看看它有哪些常用属性：

属性              类型                      作用
badge             number      在图标的右上方显示小红色气泡，显示信息
selected        bool          该属性标志子页面是否可见，如果是一个空白的内容页面，那么一定是忘记了选中任何的一个页面标签Tab
onPress          function      当Tab按钮被选中的时候进行回调，你可以设置selected={true}来设置组件被选中
icon            Image.propTypes.source      Tab按钮自定义的图标，如果systemicon属性被定义了，那么该属性会被忽略
selectedIcon      Image.propTypes.source     设置当Tab按钮被选中的时候显示的自定义图标，如果systemIcon属性被设置了，那么该属性会被忽略。如果定义了icon属性，但是当前的selectedIcon属性没有设置，那么该图标会被设置成蓝色
systemIcon        enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated')
                              系统预定义的图标，如果你使用这些图标，那么你上面设置的标题，选中的图标都会被这些系统图标所覆盖。
title           string      在Tab按钮图标下面显示的标题信息，如果你设置了SystemIcon属性，那么该属性会被忽略

代码实现

class RNTabBarIOS extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTabItem: 'contacts'
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.tabContainer}>
                    <Text style={styles.tabText}>
                        TabBarIOS学习
                    </Text>
                </View>

                <TabBarIOS
                    barTintColor='white'
                    tintColor='red'
                >

                    <TabBarIOS.Item
                        systemIcon='contacts'
                        selected={this.state.selectedTabItem == 'contacts'}
                        onPress={()=> {
                            this.setState({
                                selectedTabItem: 'contacts'
                            });
                        }}
                    >

                        {this._renderContent('red', '联系人')}

                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        systemIcon='favorites'
                        badge='3'
                        selected={this.state.selectedTabItem == 'favorites'}
                        onPress={()=> {
                            this.setState({
                                selectedTabItem: 'favorites'
                            });
                        }}
                    >

                        {this._renderContent('green', '最爱')}


                    </TabBarIOS.Item>
                    <TabBarIOS.Item
                        systemIcon='search'
                        selected={this.state.selectedTabItem == 'search'}
                        onPress={()=> {
                            this.setState({
                                selectedTabItem: 'search'
                            });
                        }}
                    >

                        {this._renderContent('blue', '搜索')}


                    </TabBarIOS.Item>
                    <TabBarIOS.Item
                        systemIcon='more'
                        selected={this.state.selectedTabItem == 'more'}
                        onPress={()=> {
                            this.setState({
                                selectedTabItem: 'more'
                            });
                        }}
                    >
                        {this._renderContent('purple', '更多')}


                    </TabBarIOS.Item>
                </TabBarIOS>
            </View>
        );
    }

    _renderContent(color:string, text:string) {

        return (
            <View style={[styles.textStyle, {backgroundColor: color}]}>
                <Text style={styles.tabText}>{text}</Text>
            </View>
        );

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    tabContainer: {
        height: 70,
        backgroundColor: '#4876FF',
        alignItems: 'center'
    },

    tabText: {
        fontSize: 20,
        marginTop: 30,
        color: 'white'
    },
    textStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'

    },
});

好了，TabBarIOS就学习完了，TabBarIOS还是比较简单的。