Prevent white edges during orientation change

问题:

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?

回答1:

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

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

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

Locate snippet that looks similar to the following:

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

Add the following line of code immediately after the previous snippet:

rootView.backgroundColor = [UIColor blackColor];

The resulting code block should look like the following:

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

rootView.backgroundColor = [UIColor blackColor];

BAM! RootView background color is set on iOS!

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).

Hope this helps!

回答2:

I created a library, it allows you to do it from the level of JavaScript, and also allows you to do dynamic changes.

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:

I am not sure what you are referring to here. But what ever is containing that view needs to have its background set also perhaps?