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