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