在方向更改期间防止白边

Posted 2023-03-15

【中文标题】在方向更改期间防止白边

【英文标题】：Prevent white edges during orientation change

【发布时间】：2016-04-09 01:20:13

【问题描述】：

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

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

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

【参考方案1】：

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

在本例中，我们将在 ios 上将背景颜色设置为 黑色。

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

找到类似于以下内容的 sn-p：

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

在前一个 sn-p 之后立即添加以下代码行：

rootView.backgroundColor = [UIColor blackColor];

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

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

rootView.backgroundColor = [UIColor blackColor];

砰！ RootView 背景颜色是在 iOS 上设置的！

此信息及更多信息可从以下博客文章中获得：Changing the React Native RootView Background Color (iOS and android)，作者为 Jay Garcia。 （我认为这篇文章中的 Android 信息可能已经过时，这就是我没有包含 Android 步骤的原因。

希望这会有所帮助！

【讨论】：

啊。 React-Native 没有使用 javascript API 解决这个问题，这很糟糕。我想知道这是否可以变成一个 npm 模块，是否可以在整个应用程序中动态更改颜色。

【参考方案2】：

我创建了一个库，它可以让你从 JavaScript 的层面去做，也可以让你做动态的改变。

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

import  setRootViewBackgroundColor  from 'react-native-root-view-background';

export default class Main extends Component 
    componentDidMount()
        setRootViewBackgroundColor('#ccc');
    

【参考方案3】：

我不确定你在这里指的是什么。但是，包含该视图的内容可能也需要设置其背景？

【讨论】：

你能帮我澄清一下我的问题吗？我不知道还有什么其他细节可以帮助。没有任何东西包含视图。它是应用程序中的根组件和唯一组件，问题仍然存在。