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

Question

随着 iOS 13 中页面表的引入，我的应用程序中出现了一个我似乎无法更改的白色背景（在白色页面表后面，以及底层页面的灰色顶部）：

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

对于弹出的 React Native 应用程序，可以使用：

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

我很好奇是否有人使用托管世博会找到了解决这个问题的方法。因为我找不到太多关于这个问题的抱怨，除了：

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

Answer 1

对于正在使用@react-navigation并寻找一种方法来更改选项卡更改之间根视图的背景颜色的任何人：只需将backgroundColorprop 添加到app.json：

"backgroundColor": "#000000",

也可能适用于其他场景。

Answer 2

使用导航器有一个简单的技巧......

<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 将默认的白色背景颜色更改为您想要的背景颜色。我希望这个答案对我有用。

Answer 3

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

这就是我最终所做的：

• createStackNavigator使用, with属性创建一个标准 StackNavigator mode='modal'。
• 将我的所有模式放入应用程序根目录的导航器中，并...TransitionPresets.ModalPresentationIOS放在屏幕选项中。这模仿了您正在寻找的行为，因为 createStackNavigator 尊重app.json 文件中为其根视图设置的backgroundColor属性。

在找到这个小吃（ https://snack.expo.io/@satya164/modal-presentation-style-in-react-navigation ）后，我想出了这个解决方案。这远非完美，但却是我目前使用托管世博会所能做的最好的事情。通过嵌套导航器，我继续使用createNativeStackNavigator推送导航器来为除模态之外的任何内容获得良好的本机推送转换。