美文网首页
利用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