react-native - 如何在反应原生中自定义反应导航底部选项卡?
问题描述
我正在尝试在我的应用程序中自定义底部选项卡。我正在使用
react-navigation/bottom-tabs: 5.8.0
. 我想要底部标签的以下样式
是否可以为底部选项卡定制样式?如果有人在此之前尝试过,请提供帮助。任何帮助都会非常重要。谢谢。
解决方案
我会使用自定义标签栏来制作我想要的底部栏
import { View, Text, TouchableOpacity } from 'react-native';
function MyTabBar({ state, descriptors, navigation }) {
const focusedOptions = descriptors[state.routes[state.index].key].options;
if (focusedOptions.tabBarVisible === false) {
return null;
}
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityStates={isFocused ? ['selected'] : []}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1 }}
>
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
{label}
</Text>
</TouchableOpacity>
);
})}
</View>
);
}
// ...
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
{...}
</Tab.Navigator>
https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar
推荐阅读
- elasticsearch - Couchbase 弹性连接器检查点问题
- javascript - 如果我们发现重复的最大出现次数,如何在 JavaScript 中返回字符串中字母的最大出现次数?
- c# - MVC TextBoxFor 显示日期格式而不是值
- javascript - PerformanceResourceTiming.responseStart 和 PerformanceResourceTiming.requestStart 都为 0,表示状态正常的 http 请求
- arrays - 从数组中获取特定键
- javascript - 当用户在Javascript中使用鼠标滚轮开始滚动时,如何确定用户将滚动多少像素
- vb.net - 在 Visual Basic 中旋转 BMP
- c++ - 从 C++ 项目调用 docker 容器
- wordpress - 如何在 WordPress 中禁用古腾堡
- ubuntu - AWK 提取列中具有相同单词的前两行