我需要使用 React Navigation (v6) 创建一个底部选项卡导航,如下所示:
到目前为止,我所做的是:
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="ForYou" component={ForYouScreen} />
<Tab.Screen name="Maps" component={MapsScreen} />
<Tab.Screen name="Premium" component={PremiumScreen} />
<Tab.Screen name="Shop" component={ShopScreen} />
<Tab.Screen name="Media" component={MediaScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
但我不确定样式的正确方法,我应该尝试以某种方式设置第三个标签按钮的样式吗?或者我应该创建一个 4 个选项卡导航并在中间创建一个浮动按钮,但在这种情况下,我如何在中间的选项卡中为其创建空间?
任何想法或片段表示赞赏。