Фоновое изображение для всего приложения в ReactNative

Question

В React Native у нас есть компонент ImageBackground, который будет отображать фоновое изображение в контроллере. Я хочу иметь одинаковое фоновое изображение для всех контроллеров. Вместо того, чтобы записывать его на всех контроллерах, есть ли способ установить фоновое изображение для всего приложения?

Answer 1

Простой подход - определить один MainComponent, который всегда является родительским представлением ваших экранов. Вы можете легко добавить подпредставления с помощью {this.props.children}.

См. Упрощенный пример ниже:

MainComponent:

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