在方向改变期间防止白边 [英] Prevent white edges during orientation change

问题描述

我用最小的 React-Native 应用重现了这个问题:

I reproduce this issue with the most minimal React-Native app:

render() {
  return View({style: {
    flex: 1,
    backgroundColor: 'black'
  }})
}

当我旋转手机时，屏幕的一侧在方向转换期间有一个白色部分.如何为该区域与背景的其余部分着色相同?

When I rotate my phone, one side of the screen has a white section during the orientation transition. How can I color that area the same as the rest of the background?

推荐答案

在您的应用程序的 RootView 中，默认背景颜色为白色.您可以使用以下步骤将其更改为另一种颜色:

In the RootView of your app, the default background color is white. You can change this to another color by using the following steps:

在此示例中，我们将在 iOS 上将背景颜色设置为黑色.

In this example we'll set the background color to black on iOS.

打开位于 PROJECT_DIR/ios/Appname/ 中的 AppDelegate.m 进行编辑.

Open AppDelegate.m located in PROJECT_DIR/ios/Appname/ for editing.

找到类似于以下内容的代码段:

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"Appname"
                                           initialProperties:nil
                                               launchOptions:launchOptions];

在上一个片段之后立即添加以下代码行:

rootView.backgroundColor = [UIColor blackColor];

生成的代码块应如下所示:

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                moduleName:@"Appname"
                                         initialProperties:nil
                                             launchOptions:launchOptions];

rootView.backgroundColor = [UIColor blackColor];

砰！RootView 背景色在 iOS 上设置！

此博客文章中提供了此信息和更多信息:更改 React Native RootView 背景颜色(iOS 和 Android) 作者:Jay Garcia.(我相信这篇文章中的 Android 信息可能已经过时，这就是为什么我没有包含针对 Android 的步骤).

This information and more is available from this blog post: Changing the React Native RootView Background Color (iOS and Android) by Jay Garcia. (I believe the Android information in this post may be out of date, which is why I didn't include steps for Android).

希望这会有所帮助！

这篇关于在方向改变期间防止白边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！