目标：
1.实现顶部导航动态配置功能，可滑动，设置相关样式，可传递参数。
2.实现底部标签栏动态配置功能，可进行主题切换。
1.我们首先要从react-navigation导入 createMaterialTopTabNavigator这个组件。
然后在要配置的页面进行初始化的属性设置，代码如下
export default class PopularPage extends Component<Props>{
constructor(props){
super(props);
this.tabNames=['Java','Android','iOS','PHP','ReactNative'];
}
_genTabs(){
const tabs={};
this.tabNames.forEach((item,index)=>{
tabs[`tab${index}`]={
// screen:TabTopBar,
//可以给下面的页面传递参数
screen:props=><TabTopBar{...props} tabLabel={item}/>,
navigationOptions:{
title:item
}
}
})
return tabs;
}
render(){
const TabNavigator=createAppContainer(createMaterialTopTabNavigator(
this._genTabs(),{
tabBarOptions:{
tabStyle: styles.tabStyle,
//标签非大写
upperCaseLabel:false,
//滚动标签
scrollEnabled:true,
//背景色
style:{
backgroundColor:'#678',
},
indicatorStyle: styles.indicatorStyle,
labelStyle: styles.labelStyle,
}
}
));
return (
<View style={styles.container}>
<TabNavigator/>
</View>
);
}
}
constructor中设置初始化的模块，此步骤真实开发中一般从网络中获取。
_genTabs()方法为配置其中的相关模块
screen:props=><TabTopBar{...props} tabLabel={item}/>,这里值得关注的是，可以通过这种方法给配置的顶部模块传递相关参数，我这里传递了模块的名字。
配置好后，在render方法中进行返回即可。
class TabTopBar extends Component<Props>{
render(){
const {tabLabel}=this.props;
return(
<View style={styles.container}>
<Text style={{flex: 1,justifyContent: 'center'} } onPress={()=> {
NavigatorUtils.gotoPage({},'DetailInfoPage');
}} >{tabLabel}点我进详情</Text>
</View>
);
}
}
这个为配置的相关页面。
const styles = StyleSheet.create({
container:{
flex: 1,
justifyContent: 'center',
marginTop: 30
},
tabStyle:{
minWidth: 50
},
indicatorStyle:{
height: 2,
backgroundColor: 'white',
},
labelStyle:{
fontSize:13,
marginTop: 6,
marginBottom: 6,
}
})
相关样式
二:如何自定义底部标签栏并且可以进行主题色切换？
首先创建一个自定义Js类。我这里定义为DynamicTabNavigator。
因为要自定义tabbar，这里需要几个组件
1.import {BottomTabBar} from 'react-navigation-tabs';这个是自定义底部标签栏必要的组件
2.import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
这里的 materiallicons 是react-native-vector-icons下面的一个子组件。这个组件包含了很多矢量图和字体。然后就是一些我们需要包裹的页面
具体代码如下
//配置需要的页面
const TABS = {
PopularPage: {
screen: PopularPage,
navigationOptions:{
tabBarLabel:'最热',
tabBarIcon:({tintColor,focused})=>(
<MaterialIcons
name={'whatshot'}
size={26}
style={{color:tintColor}}
/>
)
}
},
TrendingPage:{
screen: TrendingPage,
navigationOptions:{
tabBarLabel:'趋势',
tabBarIcon:({tintColor,focused})=>(
<MaterialIcons
name={'whatshot'}
size={26}
style={{color:tintColor}}
/>
)
}
},
FavouritePage:{
screen:FavouritePage,
navigationOptions:{
tabBarLabel:'喜欢',
tabBarIcon:({tintColor,focused})=>(
<MaterialIcons
name={'whatshot'}
size={26}
style={{color:tintColor}}
/>
)
}
},
MyPage:{
screen:MyPage,
navigationOptions:{
tabBarLabel:'我的',
tabBarIcon:({tintColor,focused})=>(
<MaterialIcons
name={'whatshot'}
size={26}
style={{color:tintColor}}
/>
)
}
}
};
export default class DynamicTabNavigator extends Component {
//底部样式方法
_tabNavigator() {
//将配置的模块导出
const {PopularPage,TrendingPage,FavouritePage,MyPage}=TABS
//配置需要的模块
const tabs = {PopularPage,TrendingPage,FavouritePage,MyPage};
//动态设置底部标题
PopularPage.navigationOptions.tabBarLabel='最热';
return createAppContainer( createBottomTabNavigator(tabs,{
//这里通过这个属性设置来自定义模块中的item
tabBarComponent:TabBarComponent
}
))
}
render(){
const Tab = this._tabNavigator();
return <Tab/>;
}
}
//底部标签栏组件
class TabBarComponent extends React.Component{
constructor(props){
super(props);
//设置主体颜色
this.theme = {
tintColor:props.activeTintColor,
updateTime:new Date().getTime(),
}
}
render(){
//取出当前路由的数组和index
const {routes,index}=this.props.navigation.state;
if (routes[index].params){
const {theme}=routes[index].params;
//设置主题。如果当前时间大于之前的时间。 就更新
if (theme&&theme.updateTime>this.theme.updateTime){
this.theme = theme;
}
}
return <BottomTabBar
{...this.props}
activeTintColor={this.theme.tintColor||this.props.activeTintColor}
/>
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
justifyContent: 'center'
}
})
在其他页面改变主题颜色
import React,{Component} from 'react';
import {Text,StyleSheet,View,Button} from 'react-native';
export default class TrendingPage extends Component{
render(){
const {navigation}= this.props;
return (
<View style={styles.container}>
<Text>
TrendingPage!
</Text>
<Button title={'改变主题参数'} onPress={()=>{
navigation.setParams({
theme:{
tintColor:'red',
updateTime: new Date().getTime()
}
})
}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
justifyContent: 'center'
}
})
这里是通过navigation.setPatams方法来进行主题色更改。
