TabBarIOS

最新推荐文章于 2022-12-12 11:54:56 发布

liu__000

最新推荐文章于 2022-12-12 11:54:56 发布

阅读量302

点赞数

本文链接：https://blog.csdn.net/liu__000/article/details/53197519

版权


import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    TabBarIOS
} from 'react-native';

export default class TabBar extends Component {

    constructor(props){
        super(props);

        this.state = {
            selectedTabBarItem: 'home'
        };
    }

    render(){
        return(
            <View style={styles.container}>
                <Text>aaa</Text>
                <TabBarIOS
                    barTintColor='orange'
                    // tintColor = 'purple'
                    title="张三"
                >

                    {/* 1 */}
                    <TabBarIOS.Item
                        badge="3"
                        systemIcon="bookmarks"
                        selected={this.state.selectedTabBarItem == 'home'}
                        onPress = {()=>{this.setState({selectedTabBarItem: 'home'})}}
                    >
                        {/*界面中的内容*/}
                        <View style={[styles.itemStyle, {backgroundColor:'gray'}]}>
                            <Text>首页</Text>
                        </View>
                    </TabBarIOS.Item>


                    {/* 2 */}
                    <TabBarIOS.Item
                        systemIcon="downloads"
                        selected={this.state.selectedTabBarItem == 'second'}
                        onPress = {()=>{this.setState({selectedTabBarItem: 'second'})}}
                    >
                        {/*界面中的内容*/}
                        <View style={[styles.itemStyle, {backgroundColor:'orange'}]}>
                            <Text>第二页</Text>
                        </View>
                    </TabBarIOS.Item>

                </TabBarIOS>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: 'white',
        marginTop: 20
    },
    itemStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
});

module.exports = TabBar;