React Navigation を使用して、下の図のようなタブ バーを作成しようとしています。
いくつかのコードを試しましたが、何も機能しませんでした。一部のコードは以前の React ナビゲーション バージョンのものです。実際の問題は、タブ バーに下と両側に余白を設け、境界線を丸くすることです。
誰か助けてくれませんか？
ベストアンサー1
デモはこちらです:https://snack.expo.io/@nomi9995/createbottomtabnavigator-%7C-react-navigation
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>
);
}