React Native 应用程序中所有屏幕的通用样式

Question

我正在开发我的第一个 React Native (Expo) 应用程序，并且我正在尝试为所有屏幕设置通用背景颜色：

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Chat from "./screens/Chat";
import Home from "./screens/Home";
import Settings from "./screens/Settings";
import { SafeAreaView, Text } from "react-native";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function TabNav() {
  return (
    <Tab.Navigator>
      <Tab.Screen name={"Home"} component={Home} />
      <Tab.Screen name={"Chat"} component={Chat} />
      <Tab.Screen name={"Settings"} component={Settings} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Main" component={TabNav} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

经过大量谷歌搜索和实验后，我似乎找不到一种方法来为我添加到的所有屏幕设置通用背景颜色

<NavigationContainer>

。当然，这不仅仅是背景颜色，例如为所有屏幕设置通用的弹性设置。我认为将

<NavigationContainer>

包裹在

<SafeAreaView style={{flex: 1, backgroundColor: "red"}}>

中可以解决问题，但这也不起作用。

肯定有一个通用模式可以向导航器中的所有屏幕添加背景颜色，对吧？或者一般应用程序中的所有屏幕？我在这里错过了什么吗？

提前非常感谢您！！

Answer 1

不幸的是，我没有在 NativeStackNavigator 中找到所有屏幕的全局样式，但至少 StackNavigator 和 TabsNavigator 是可能的：

在 StackNavigator 中，您可以使用 screenOptions 中的 cardStyle 属性 这里我有一个例子：

const Stack = createStackNavigator(); // note: this is not createNativeStackNavigator

const StackNavigator = () => {
    return (
        <Stack.Navigator screenOptions={{cardStyle:{backgroundColor:'orange'}}}>
            <Stack.Screen name="Screen1" component={Screen1} />
            <Stack.Screen name="Screen2" component={Screen2} />
            <Stack.Screen name="Screen3" component={Screen3} />
            <Stack.Screen name="Screen4" component={Screen4} />
            <Stack.Screen name="NotificationsScreen" component={NotificationsScreen} />
        </Stack.Navigator>
    )
}

现在在 TabNavigator 中你可以使用 sceneContainerStyle 属性：

const Tab = createBottomTabNavigator<TabParamList>();

const UserTab = () => {
    return (
        <Tab.Navigator sceneContainerStyle={{backgroundColor:'#000'}}>
            <Tab.Screen name="Screen1" component={Screen1} options={options.Screen1}/>
            <Tab.Screen name="Screen2" component={Screen2} options={options.Screen2}/>
            <Tab.Screen name="Screen3" component={Screen3} options={options.Screen3}/>
            <Tab.Screen name="Screen4" component={Screen4} options={options.Screen4}/>
            <Tab.Screen name="NotificationsScreen" component={NotificationsScreen} options={{tabBarButton:() => null}}/>
        </Tab.Navigator>
    )
}

如果这些解决方案不是您想要的，我建议您创建一个wrapperComponent，它将具有您需要的背景，然后放入所有屏幕内。