React Native 中整个应用程序的背景图片答案

【问题标题】：Background image for entire application in ReactNativeReact Native 中整个应用程序的背景图片
【发布时间】：2020-03-24 15:09:29
【问题描述】：

在 React Native 中，我们有 ImageBackground 组件，它将在控制器中显示背景图像。我想为所有控制器使用相同的背景图像。除了在所有控制器中编写它，有没有办法可以为整个应用程序设置背景图像？

【问题讨论】：

标签： react-native imagebackground

【解决方案1】：

一种简单的方法是定义一个 MainComponent，它始终是屏幕的父视图。您可以使用{this.props.children} 轻松注入子视图。

参见下面的简化示例：

主组件：

class MainComponent extends Component {

   render() {

      return (
         <View style ...>
            <ImageBackground .../> 
          {this.props.children}
         </View>
      );
   } 
}

控制器：

import MainComponent from 'yourPATH'

class Controller extends Component {

   render() {
      return (
         <MainComponent>

          //ADD YOUR Regular Controller Screen here. 

         </MainComponent>
      );
   } 
}

您可以在此处阅读更多信息：https://reactjs.org/docs/composition-vs-inheritance.html

【讨论】：

感谢您的更新。即使使用这种方法，我也必须在所有控制器中处理。
@Satyam 不，那不是真的，当然您可以将此 MainComponent 指定为您的应用程序的根视图。在某些时候你需要一个根视图，这是肯定的。