TabBarIOS和NavigatorIOS组合使用

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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值