自定义标签栏 React 导航 5 [英] Custom Tab Bar React Navigation 5
本文介绍了自定义标签栏 React 导航 5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 React Navigation 制作如下图所示的标签栏.
I'm trying to make a tab bar like in the picture bellow, using React Navigation.
我尝试了一些代码,但没有任何效果.一些代码来自之前的 React 导航版本.真正的问题是让标签栏从底部和两侧都有边距,并且边框是圆形的.
I tried some codes, but nothing worked. Some codes are from previous React Navigation Version. The really problem is make the tab bar have a margin from from bottom and both sides, and borders rounded.
有人可以帮我吗?!
推荐答案
这里是演示:https://snack.expo.io/@nomi9995/createbottomtabnavigator-%7C-react-navigation
您可以使用 tabBar
道具制作自定义 TABbar
you can use tabBar
props to make custom TABBAR
<NavigationContainer>
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
MyTabBar 组件
function MyTabBar({ state, descriptors, navigation }) {
return (
<View style={{ flexDirection: 'row',backgroundColor:"#F4AF5F",height:50,borderRadius:50,justifyContent:"center",alignItems:"center" }}>
{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,
});
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, alignItems:"center" }}
>
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
{label}
</Text>
</TouchableOpacity>
);
})}
</View>
);
}
这篇关于自定义标签栏 React 导航 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文