我正在编写一个应用程序,其底部标签导航器嵌套在堆栈导航器中,我试图将此标签导航器中所有屏幕的内容样式作为目标,但我使用的命令不起作用
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
function TabNavigator(){
return (
<Tab.Navigator
// tabBarOptions={{
// style: {backgroundColor: "#511cff"} // deprecated metro says to place it into screenOptions under tabBarStyle
// }}
screenOptions={{
// headerStyle: { backgroundColor: "#2f28fc" },
tabBarActiveTintColor: "#F8F2DA",
tabBarOptions:{
contentStyle: {backgroundColor:"#511cff"},
sceneContainerStyle: {backgroundColor:"#511cff"},
},
tabBarStyle: {
backgroundColor: "#2f28fc",
contentStyle: {backgroundColor:"#511cff"},
sceneContainerStyle: {backgroundColor:"#511cff"},
},
contentStyle: {backgroundColor:"#511cff"},
sceneContainerStyle: {backgroundColor:"#511cff"},
headerShown: false,
}}
>
</Tab.Navigator>
)
}
export default function App() {
return (
<>
<StatusBar style="light" />
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: "#2f28fc" },
headerTintColor: "#F8F2DA",
sceneContainerStyle: { backgroundColor: "#511cff" }
}}
>
<Stack.Screen
name='ExpensesView'
component={TabNavigator}
screenOptions={{
sceneContainerStyle:{ backgroundColor: "#511cff" },
contentStyle: {backgroundColor:"#511cff"}
}}
/>
</Stack.Navigator>
</NavigationContainer>
</>
);
}
从这里看过去:https://github.com/react-navigation/react-navigation/issues/8076我认为解决方案是在Navigator中使用sceneContainerStyle属性,如下所示:
<Tab.Navigator
sceneContainerStyle= {{
backgroundColor: "#511cff"
}}
2条答案
按热度按时间w46czmvw1#
我为你阅读了文档,发现你的语法是无效的。它们和tabBarOptions一点也不像。
下面是如何使用选项卡栏https://reactnavigation.org/docs/screen-options中的选项的链接
希望这对你有帮助。
igetnqfo2#
我能够通过使用screenoptions属性之外的scenecontainerstyle属性来解决这个问题。为什么他们只为tabnavigator将其从screenoptions中移出是一个谜,但它是有效的。
代码: