TabBarIOS和NavigatorIOS组合使用

最新推荐文章于 2025-08-12 10:40:58 发布

原创最新推荐文章于 2025-08-12 10:40:58 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用React Native实现的应用底部导航栏组件案例。该案例通过TabBarIOS组件结合NavigatorIOS来展示不同页面，并利用状态管理切换当前选中的Tab。文章展示了如何设置导航栏的颜色、图标以及页面跳转。

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

var Home = require('./Home');
var Find = require('./Find');

export default class Main extends Component{

    constructor(props){
        super(props);

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

    render(){
        return(
            <View style={styles.container}>


                <TabBarIOS // 底部导航
                    tintColor="red"
                >
                    <TabBarIOS.Item // 底部导航图片\标题
                        icon = {require('image!tabbar_home')}
                        title = '首页'
                        selected={this.state.selectedTabBarItem == 'home'}
                        onPress={()=>this.setState({selectedTabBarItem:'home'})}
                    >
                        <NavigatorIOS // 上部导航和界面
                            tintColor="red"
                            style={{flex:1}} // 必须要设置大小
                            initialRoute = {
                                {
                                    component: Home,
                                    title:'网易',
                                    leftButtonIcon:require('image!navigationbar_friendattention'),
                                    rightButtonIcon:require('image!navigationbar_pop')
                                }
                            }
                        />
                    </TabBarIOS.Item>


                    <TabBarIOS.Item
                        icon = {require('image!tabbar_message_center')}
                        title = '发现'

                        selected = {this.state.selectedTabBarItem == 'find'} // 是否选中
                        onPress = {()=>this.setState({selectedTabBarItem:'find'})}
                    >
                        <NavigatorIOS
                            tintColor="blue"
                            style = {{flex:1}}
                            initialRoute = {
                                {
                                    component: Find,
                                    title: '发现',
                                    rightButtonIcon: require('image!navigationbar_pop')
                                }
                            }
                        >
                        </NavigatorIOS>
                    </TabBarIOS.Item>
                </TabBarIOS>
            </View>
        );
    }
}

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

module.exports = Main;