利用TabNavigator来实现的下面的选项卡

 import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    Button,
    Image
} from 'react-native';
import {TabNavigator} from 'react-navigation';
class Home extends Component {
    static navigationOptions= {
        tabBarLabel: '首页',
        tabBarIcon: ({tintColor,focused})=>(
            <Image
                source={!focused?require('../img/me.png'):require('../img/me.png')}
                style={[{width:20,height:20},{tintColor:tintColor}]}
            />
        ),
    };
    render() {
        return (
            <Text>页面一</Text>
        );
    }
}
class MyHome extends Component {
    static navigationOptions= {
        tabBarLabel: '我的',
        tabBarIcon: ({tintColor,focused})=>(
            <Image
                source={!focused?require('../img/Set.png'):require('../img/Set.png')}
                style={[{width:20,height:20},{tintColor:tintColor}]}
            />
        ),
    };
    render() {
        return (
            <Text>页面二</Text>
        );
    }
}
class MyName extends Component {
    static navigationOptions= {
        tabBarLabel: '姓名',
        tabBarIcon: ({tintColor,focused})=>(
            <Image
                source={!focused?require('../img/vip.png'):require('../img/vip.png')}
                style={[{width:20,height:20},{tintColor:tintColor}]}
            />
        ),
    };
    render() {
        return (
            <Text>页面三</Text>
        );
    }
}
const MyApp=TabNavigator({
    首页:{screen:Home},
    我的:{screen:MyHome},
    姓名:{screen:MyName}
},{
    tabBarPosition:"bottom",
    tabBarOptions:{
        activeTintColor:'blue',
        inactiveTintColor:'#a0a0a0',
        style:{
            backgroundColor:'#fff',
            borderTopWidth:1,
            borderTopColor:'#ccc',
            height:55,
        },
        labelStyle:{
          marginTop:2,
        },
        iconStyle:{
            marginTop:-1,
        },
        indicatorStyle :{
            height:0,
        },
        showIcon:true,
    },

});
module.exports=MyApp;


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容