React Native_React Native组件(TabBar iOS)

最新推荐文章于 2025-07-17 14:18:49 发布

原创最新推荐文章于 2025-07-17 14:18:49 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#TabBar

React-Native 同时被 2 个专栏收录

19 篇文章

订阅专栏

React Native

19 篇文章

订阅专栏

本文介绍了一个基于React Native的TabBarIOS组件使用示例，演示了如何实现不同页面间的切换，并展示了如何通过状态管理来更新当前选中的Tab。该示例仅适用于iOS平台。

很遗憾，TabBar iOS 仅仅支持iOS系统，安卓的需要我们使用第三方的插件，会在以后的文档中更新。以下的Demo主要是TabBar的切换，以后再实际项目中，我们会结合Navigator对其进行封装抽离。

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

} from 'react-native';



export default class ListViewTest2 extends Component {

    constructor(pros){
        super(pros);
        this.state={
            //默认被选中的item
            selectedTabBarItem:'home'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                {/*头部*/}
                <View>
                    <Text>TabBar练习</Text>
                </View>

                {/*选项卡*/}
                <TabBarIOS
                  barTintColor='black'
                  tintColor='purple'
                >
                    {/*第一个*/}
                    <TabBarIOS.Item
                        systemIcon="contacts"
                        badge={3}
                        selected={this.state.selectedTabBarItem == 'home'}
                        onPress={()=>{this.setState({selectedTabBarItem:'home'})}}

                    >

                        <View style={[styles.commonViewStyle,{backgroundColor: 'red'}]}>
                            <Text>首页</Text>
                        </View>
                    </TabBarIOS.Item>

                    {/*第二个*/}
                    <TabBarIOS.Item
                        systemIcon="bookmarks"
                        selected={this.state.selectedTabBarItem == 'second'}
                        onPress={()=>{this.setState({selectedTabBarItem:'second'})}}
                    >
                        <View style={[styles.commonViewStyle,{backgroundColor: 'green'}]}>
                            <Text>第二页</Text>
                        </View>

                    </TabBarIOS.Item>

                    {/*第三个*/}
                    <TabBarIOS.Item
                        systemIcon="downloads"
                        selected={this.state.selectedTabBarItem == 'three'}
                        onPress={()=>{this.setState({selectedTabBarItem:'three'})}}
                    >

                        <View style={[styles.commonViewStyle,{backgroundColor: 'blue'}]}>
                            <Text>第三页</Text>
                        </View>
                    </TabBarIOS.Item>

                    {/*第四个*/}
                    <TabBarIOS.Item
                        systemIcon="search"
                        selected={this.state.selectedTabBarItem == 'four'}
                        onPress={()=>{this.setState({selectedTabBarItem:'four'})}}
                    >

                        <View style={[styles.commonViewStyle,{backgroundColor: 'purple'}]}>
                            <Text>第四页</Text>
                        </View>
                    </TabBarIOS.Item>
                </TabBarIOS>
            </View>
        );
    }



}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#F5FCFF'
    },
    commonViewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
});