TabBarIOS和NavigatorIOS组合使用

最新推荐文章于 2023-07-31 22:02:44 发布

liu__000

最新推荐文章于 2023-07-31 22:02:44 发布

阅读量1.3k

点赞数

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

版权

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;