Вы можете сделать пользовательскую вкладку для bottomTabNavigator. У меня есть один из них, работающий над проектом, посмотрите:
import {createBottomTabNavigator} from "react-navigation-tabs";
import { CustomTab } from '../../common/components';
...
const Tabs = createBottomTabNavigator({
Home: {
screen: HomeStack,
},
Events: {
screen: EventStack,
},
Templates:{
screen: TemplateStack
}
}, {
initialRouteName: 'Home',
tabBarOptions: {
activeTintColor: theme.palette.primaryColor,
},
tabBarComponent: CustomTab,
tabBarPosition: 'bottom',
});
и мой компонент CustomTab:
import React, {PureComponent} from 'react'
import {View, TouchableWithoutFeedback, Text, StyleSheet} from 'react-native'
import I18N from "react-native-i18n";
import * as Animatable from 'react-native-animatable';
import theme from '../theme'
import {Icon} from './Icon'
class CustomTab extends PureComponent {
constructor(){
super()
this.state = {
routeNameSelected:'Home'
}
}
getIconName(routeName){
switch (routeName) {
case 'EventInfoTab':
return 'information-outline'
case 'EventChannelTab':
return 'play-box-outline'
case 'EventCommentTab':
return 'comment-text-outline'
case 'Home':
return 'home'
case 'Events':
return 'calendar-star'
case 'Templates':
return 'clipboard-text'
}
}
onPressTab(routeName){
this.props.jumpTo(routeName)
this.setState({
routeNameSelected:routeName
})
}
render() {
const {navigation} = this.props;
const {routes} = navigation.state;
return (
<View style={styles.tabbar}>
{routes && routes.map((route, index) => {
return (
<TouchableWithoutFeedback
key={route.key}
style={styles.tab}
onPress={() => this.onPressTab(route.routeName)}
>
<View style={{minHeight:50, justifyContent:'center'}}>
{navigation.state.index===index &&
<Animatable.View animation="rubberBand" duration={1000} style={styles.tab}>
<Icon size={24} name={this.getIconName(route.routeName)} style={{ color: theme.palette.primaryColor }} />
<Text style={[styles.tabText,{color: theme.palette.primaryColor}]}>{I18N.t('tabs.'+route.routeName)}</Text>
</Animatable.View>
}
{navigation.state.index!==index &&
<View style={styles.tab}>
<Icon size={24} name={this.getIconName(route.routeName)} style={{ color: theme.palette.colors.titleColor }} />
<Text style={[styles.tabText,{color: theme.palette.colors.titleColor}]}>{I18N.t('tabs.'+route.routeName)}</Text>
</View>
}
</View>
</TouchableWithoutFeedback>
);
})}
</View>
)
}
}
export {CustomTab}
Определение состояния для базовой вкладки и представления, отображаемого в соответствии с этим состоянием в компоненте CustomTab. Дайте мне знать, если это полезно для вас.