如何在托管博览会应用程序中更改根视图背景？

Question

随着iOS 13中的Page Sheets的引入，我的应用中出现了一个白色背景，我似乎无法更改（在白色Page Sheet和基础页面的灰色顶部之后）：

显然，对于大多数应用程序来说，黑色背景颜色看起来要好得多。

在弹出的React Native应用程序中，可以使用：

https://github.com/johniak/react-native-root-view-background

我很好奇，是否有人使用托管的Expo找出了一种解决方法。除了以下内容之外，我找不到太多的投诉

https://github.com/expo/expo/issues/1563

Answer 1

我想您正在使用带有createNativeStackNavigator的react-navigation 5.x，然后在屏幕选项中使用presentation:"modal"。我找不到用这种类型的导航器在根视图上设置黑色背景的方法。

这就是我最终要做的：

• 使用createStackNavigator和mode='modal'属性创建标准的StackNavigator。
• 将所有模态输入此导航器中的应用程序根目录，并在屏幕选项中使用...TransitionPresets.ModalPresentationIOS。这模仿了您要查找的行为，因为createStackNavigator会在app.json文件的根视图中遵守在其app.json文件中设置的 backgroundColor 属性。

找到此零食（https://snack.expo.io/@satya164/modal-presentation-style-in-react-navigation）之后，我想出了这个解决方案。这远非完美，但我目前使用托管的Expo可以做到的最好。借助嵌套导航器，我一直使用createNativeStackNavigator来推动推送导航器，以获取除模式之外的任何其他东西的漂亮的本地推送过渡。

Answer 2

对于使用@react-navigation并在标签更改之间寻找改变根视图背景颜色的任何人：只需将backgroundColor属性添加到app.json：

"backgroundColor": "#000000",

在其他情况下也可能工作。

Answer 3

There is an simple trick using navigator...
<NavigationContainer>
    <Stack.Navigator
        screenOptions={{
            cardStyle: {
                backgroundColor: 'Your_Color_Here'
            }
        }}
              <Stack.Screen name="Login" component={LoginScreen}  />
               <Stack.Screen name="Register" component={RegisterScreen} />
      </Stack.Navigator>
</NavigationContainer >

您可以使用cardStyle将默认的白色backgroundColor更改为所需的backgroundColor。我希望这个答案对我有用。