react-native - React Native 中底部导航的边框底部
问题描述
我是 React Native 的新手。我正在制作一个底部导航栏。我想在选择选项卡时添加边框底部,如下图所示。根据文档,indicatorStyle仅适用于顶部导航。我不确定该怎么做。
import {
createBottomTabNavigator,
} from 'react-navigation';
import SettingsScreen from '../settings';
import rootStyles from '../../rootStyles';
const ICON_HOME = require('../../../assets/icon/home.png');
const ICON_USER = require('../../../assets/icon/user_selected.png');
const ICON_CURRENCY = require('../../../assets/icon/currency.png');
export default createBottomTabNavigator({
HomeScreen: {
screen: SettingsScreen,
},
SettingsScreen: {
screen: SettingsScreen,
},
CurrencyScreen: {
screen: SettingsScreen,
},
}, {
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => {
const { routeName } = navigation.state;
let icon;
switch (routeName) {
case 'HomeScreen':
icon = ICON_HOME;
break;
case 'SettingsScreen':
icon = ICON_USER;
break;
case 'CurrencyScreen':
icon = ICON_CURRENCY;
break;
default: break;
}
return (
<Image
source={icon}
style={{
height: rootStyles.em(2),
width: rootStyles.em(2),
tintColor,
}}
/>
);
},
}),
tabBarPosition: 'bottom',
tabBarOptions: {
showLabel: false,
activeTintColor: rootStyles.PRIMARY_COLOR,
},
tabBarSelectedItemStyle: {
borderBottomWidth: 2,
borderBottomColor: 'red',
},
});
解决方案
您可以为 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 组件上根据此状态呈现视图。让我知道这是否对您有帮助。
推荐阅读
- autofixture - 我将如何编写 Autofixture 自定义以仅对一种类型使用自动属性
- python - Python:[Errno 2]没有这样的文件或目录,虽然它在目录中
- javascript - 根据一天中的时间更改 wordpress 登录页面图像
- angular - 如何重命名 Angular 组件的路由 URL?
- python - QTabWidget.setFixedWidth() 用于某些选项卡但不是全部
- autodesk-forge - 有没有办法在editMode之外的查看器中显示标记?
- python - 获取按值分组的每行的百分比
- javascript - 以编程方式单击 Android WebView 中的元素
- google-cloud-platform - Fluentd 和缺少 GCP 日志记录元数据
- pandas - Pandas 实现 Equation & Groupby 2 条件