TabBarIOS，TabBarIOS.Item

最新推荐文章于 2022-04-04 21:05:10 发布

Luyc_Han

最新推荐文章于 2022-04-04 21:05:10 发布

阅读量1.3k

点赞数

分类专栏： react-native 文章标签： TabBarIOS Item

本文链接：https://blog.csdn.net/wmmhwj/article/details/68483592

版权

react-native 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

import React,{Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
    AlertIOS,

} from 'react-native';
var one = 'https://img.alicdn.com/imgextra/i1/2228361831/TB2M8V4lctnpuFjSZFKXXalFFXa_!!2228361831.jpg';
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';

export default class tabbar extends Component {

    constructor(props){
        super(props);
        this.state={
            selectedTabBarItem:'home'
        }

    }

    render(){

        return(

            <View style={styles.container}>

                <TabBarIOS barTintColor='black'>
                    <TabBarIOS.Item
                    //systemIcon = 'contacts'//和下面的title不能兼容
                    title="首页"
                    badge="99+"
                    icon={{uri:base64Icon,scale: 3}}
                    selected={this.state.selectedTabBarItem== 'home'}
                    onPress={()=>{this.setState({selectedTabBarItem:'home'})}}
                    >
                        <View style={styles.styleView}>
                            <Text>第一页</Text>
                        </View>
                    </TabBarIOS.Item>
                    <TabBarIOS.Item
                    systemIcon="downloads"
                    selected={this.state.selectedTabBarItem== 'downloads'}
                    onPress={()=>{this.setState({selectedTabBarItem:'downloads'})}}
                    >
                        <View style={styles.styleView}>
                            <Text>第二页</Text>
                        </View>

                    </TabBarIOS.Item>
                    <TabBarIOS.Item
                    systemIcon="search"
                    selected={this.state.selectedTabBarItem== 'search'}
                    onPress={()=>{this.setState({selectedTabBarItem:'search'})}}
                    >
                        <View style={styles.styleView}>
                            <Text>第三页</Text>
                        </View>

                    </TabBarIOS.Item>
                    <TabBarIOS.Item
                    systemIcon="bookmarks"
                    selected={this.state.selectedTabBarItem== 'bookmarks'}
                    onPress={()=>{this.setState({selectedTabBarItem:'bookmarks'})}}
                    >
                        <View style={styles.styleView}>
                            <Text>第四页</Text>
                        </View>

                    </TabBarIOS.Item>
                </TabBarIOS>

            </View>

        )
    }

}

const styles = StyleSheet.create({

    container:{
      backgroundColor:'#ffffff',
        flex:1,
    },

    styleView:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    }
});