1.效果图
2.代码
import React, {Component} from 'react';
import {
TabNavigator,
} from 'react-navigation';
import {
Image,
} from 'react-native';
import PayView from "./PayView";
import MainView from "./MainView";
import TaskMoneyView from './TaskMoneyView'
import MyView from './MyView'
const Dimensions = require('Dimensions'); //必须要写这一行，否则报错，无法找到这个变量
const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
const TabNav = TabNavigator({
MainView: {
screen: MainView,
navigationOptions: ({navigation}) => ({
tabBarLabel: '首页',
tabBarIcon: ({tintColor, focused}) => (
<Image style={{width: 25, height: 25}}
source={focused ? require('../image_jingdong/mian_press.png') : require('../image_jingdong/main.png')}></Image>
)
}),
},
PayView: {
screen: PayView,
navigationOptions: ({navigation}) => ({
tabBarLabel: '支付',
tabBarIcon: ({tintColor, focused}) => (
<Image style={{width: 25, height: 25}}
source={focused ? require('../image_jingdong/pay_press.png') : require('../image_jingdong/pay.png')}></Image>
)
}),
},
TaskMoneyView: {
screen: TaskMoneyView,
navigationOptions: ({navigation}) => ({
tabBarLabel: '谈钱',
tabBarIcon: ({tintColor, focused}) => (
<Image style={{width: 25, height: 25}}
source={focused ? require('../image_jingdong/task_press.png') : require('../image_jingdong/task.png')}></Image>
)
}),
},
MyView: {
screen: MyView,
navigationOptions: ({navigation}) => ({
tabBarLabel: '我',
tabBarIcon: ({tintColor, focused}) => (
<Image style={{width: 25, height: 25}}
source={focused ? require('../image_jingdong/my_press.png') : require('../image_jingdong/my.png')}></Image>
)
}),
},
},
{
// 位置，可以在顶部
tabBarPosition: 'bottom',
//是否可以滑动切换
swipeEnabled: true,
//切换是否有动画
animationEnabled: true,
//首页
initialRouteName: 'MainView',
//对于导航的设置
tabBarOptions: {
//选中时的颜色，可以用来设置图片和文字，自动设置的
activeTintColor: '#000000',
//未选中的颜色
inactiveTintColor: 'gray',
//android特有下划线的颜色
indicatorStyle: {height: 0},
//文字的样式
labelStyle: {
fontSize: 10
},
//是否显示图标，默认不显示
showIcon: true,
//是否显示文字
showLabel: true,
//对于导航的stytle
style :{
borderTopColor:'#ebebeb',
borderTopWidth:1,
backgroundColor:'white',
height:ScreenHeight*0.08,
}
}
}
);
export default class TabNav_Home extends React.Component {
render() {
return (
<TabNav />
);
}
}import React, {Component} fro
