美文网首页
利用TabNavigator来实现的下面的选项卡

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

作者: 想成为大牛的小白 | 来源:发表于2017-08-29 14:47 被阅读0次
     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;
    
    
    

    相关文章

      网友评论

          本文标题:利用TabNavigator来实现的下面的选项卡

          本文链接:https://www.haomeiwen.com/subject/wlbodxtx.html