搜集到的StackNavigator的一些使用方法
import React, { Component } from 'react';
import { AppRegistry,Image,} from 'react-native';
import { StackNavigator,TabNavigator } from 'react-navigation';
import HomePage from './Container/View/HomePage/HomePage';
import ClassView from './Container/View/Class/ClassView';
import DiscoverView from './Container/View/Discover/DiscoverView';
import CenterView from './Container/View/MyCenter/CenterView';
import EducationView from './Container/View/Education/EducationView';
import CampusIntroduction from './Container/View/Education/CampusIntroduction';
import SchoolContent from './Container/View/Education/SchoolContent';
class TabBarItem extends Component {
render() {
return(
<Image resizeMode='contain'
source={ this.props.focused ? this.props.selectedImage : this.props.normalImage }
style={ { tintColor:this.props.tintColor,} }
/>
)
}
}
{/* <Image resizeMode='contain'
source={require('./Container/Image/tab_class.imageset/tab_class.png')}
style={[ {tintColor: tintColor}]}
/> */}
const MyTabNavigator = TabNavigator({
HomePage:{screen:HomePage,
navigationOptions: {
tabBarLabel:'教乐',
tabBarIcon: ({ tintColor, focused }) => (
<Image resizeMode='contain'
source={require('./Container/Image/tab_home.imageset/tab_home.png')}
style={[ {tintColor: tintColor}]}
/>
),
}
},
ClassView:{screen:ClassView,
navigationOptions: {
tabBarLabel:'班级',
tabBarIcon: ({ tintColor, focused }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./Container/Image/tab_class.imageset/tab_class.png')}
selectedImage={require('./Container/Image/tab_class_pre.imageset/tab_class_pre.png')}
/>
),
}
},
EducationView:{screen:EducationView,
navigationOptions: {
tabBarLabel:'教育',
tabBarIcon: ({ tintColor, focused }) => (
<TabBarItem
focused={focused}
normalImage={require('./Container/Image/tab_news.imageset/tab_news.png')}
selectedImage={require('./Container/Image/tab_news_pre.imageset/tab_news_pre.png')}
/>
),
}
},
DiscoverView:{screen:DiscoverView,
navigationOptions: {
tabBarLabel:'发现',
tabBarIcon: ({ tintColor, focused }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./Container/Image/tab_found.imageset/tab_found.png')}
selectedImage={require('./Container/Image/tab_found_pre.imageset/tab_found_pre.png')}
/>
),
}
},
CenterView:{screen:CenterView,
navigationOptions: {
// tabBarLabel:'个人中心',
title:'个人中心',
tabBarIcon: ({ tintColor, focused }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./Container/Image/tab_personage.imageset/tab_personage.png')}
selectedImage={require('./Container/Image/tab_personage_pre.imageset/tab_personage_pre.png')}
/>
),
}
},
},
{
tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
lazy: true, // 是否懒加载
initialRouteName: 'HomePage',
animationEnabled: false, // 切换页面时是否有动画效果
activeTintColor:'red',
tabBarOptions: {
// pressOpacity: 0.8,
activeTintColor: '#00b7ee', // 文字和图片选中颜色
inactiveTintColor: '#999', // 文字和图片未选中颜色
// activeBackgroundColor:'white',
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
// style: {
// height: 45,
// backgroundColor: '#ffffff',
// zIndex: 0,
// position: 'relative'
// },
// labelStyle: {
// fontSize: 11, // 文字大小
// paddingVertical: 0,
// marginTop: -4
// },
// iconStyle: {
// marginTop: -3
// },
// tabStyle: {
// backgroundColor: 'rgb(230,69,51)', // TabBar 背景色
// },
// indicatorStyle: {
// height: 0 // 如TabBar下面显示有一条线，可以设高度为0后隐藏
// },
}
});
/**
* screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个screen传值和跳转。
navigationOptions：配置TabNavigator的一些属性
title：标题，会同时设置导航条和标签栏的title
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)
tabBarIcon：设置标签栏的图标。需要给每个都设置
tabBarLabel：设置标签栏的title。推荐
导航栏配置
tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）
swipeEnabled：是否允许在标签之间进行滑动
animationEnabled：是否在更改标签时显示动画
lazy：是否根据需要懒惰呈现标签，而不是提前，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐为true
trueinitialRouteName： 设置默认的页面组件
backBehavior：按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions：配置标签栏的一些属性iOS属性
activeTintColor：label和icon的前景色 活跃状态下
activeBackgroundColor：label和icon的背景色 活跃状态下
inactiveTintColor：label和icon的前景色 不活跃状态下
inactiveBackgroundColor：label和icon的背景色 不活跃状态下
showLabel：是否显示label，默认开启 style：tabbar的样式
labelStyle：label的样式安卓属性
activeTintColor：label和icon的前景色 活跃状态下
inactiveTintColor：label和icon的前景色 不活跃状态下
showIcon：是否显示图标，默认关闭
showLabel：是否显示label，默认开启 style：tabbar的样式
labelStyle：label的样式 upperCaseLabel：是否使标签大写，默认为true
pressColor：material涟漪效果的颜色（安卓版本需要大于5.0）
pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）
scrollEnabled：是否启用可滚动选项卡 tabStyle：tab的样式
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
labelStyle：label的样式
iconStyle：图标样式
*/
const SimpleApp = StackNavigator({
Main: { screen: MyTabNavigator},
SchoolContent: { screen: SchoolContent},
Campus: { screen: CampusIntroduction},
});
export default class MainTab extends Component {
render(){
return(
<SimpleApp/>
);
}
}
网友评论