【发布时间】：2019-04-19 18:52:33
【问题描述】：
所以我有这个要求。以这种精确的外观制作标签导航：
使用渐变和按钮对标签栏进行样式设置没有问题。我用这段代码创建了自己的自定义代码：
export default createBottomTabNavigator({
(... routes here)
}, {
initialRouteName: "Inspiration",
tabBarComponent: props => <BottomTabBar {...props} />
})
但现在我在使用中间按钮时遇到了问题。我的酒吧是这样的：
如果我删除了删除此行的自定义标签栏：
tabBarComponent: props => <BottomTabBar {...props} />
那么现在我的中间按钮看起来应该是这样的，但是当然，所有其他样式都丢失了：
这就是我的 BottomTabBar 组件现在的样子：
import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity } from "react-native";
import { TabBarBottomProps, NavigationRoute } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";
const iconBag = require("./images/bag.png");
export default function BottomTabBar(props: TabBarBottomProps) {
const {
renderIcon,
getLabelText,
activeTintColor,
inactiveTintColor,
onTabPress,
onTabLongPress,
getAccessibilityLabel,
navigation
} = props;
const { routes, index: activeRouteIndex } = navigation.state;
function renderTabBarButton(routeIndex, route) {
const isRouteActive = routeIndex === activeRouteIndex;
const tintColor = isRouteActive ? activeTintColor : inactiveTintColor;
if (route.key == "Bag")
return <Image style={{ width: 100, height: 100 }} source={iconBag} />;
return (
<TouchableOpacity
key={routeIndex}
style={styles.tabButton}
onPress={() => onTabPress({ route })}
onLongPress={() => onTabLongPress({ route })}
accessibilityLabel={getAccessibilityLabel({ route })}
>
{renderIcon({ route, focused: isRouteActive, tintColor })}
<Text style={styles.tabText}>{getLabelText({ route })}</Text>
</TouchableOpacity>
);
}
return (
<LinearGradient colors={["#FFFFFF", "#DEDEDE"]} style={styles.container}>
{routes.map((route, routeIndex) => renderTabBarButton(routeIndex, route))}
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: {
height: 60,
flexDirection: "row",
alignItems: "center",
borderWidth: 1,
borderColor: "#C4C4C4"
},
tabButton: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
tabText: {
fontFamily: "Source Sans Pro",
fontSize: 11,
color: "#454545",
marginTop: 1
}
});
我能做什么？非常感谢任何帮助！
【问题讨论】：
标签： react-native react-navigation