react-native - ReactNative 中整个应用程序的背景图像

Question

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

Answer 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