Установка Expo LinearGradient в качестве фона для всего собственного реагирующего приложения

Question

Я использую реагирующую навигацию, и у меня есть в себе в себе вислоид выдвижного ящика с вложенным в него стеком, как я могу установить градиентный фон для всего приложения, используя Expo LinearGradient, без необходимости оборачивать каждый компонент экрана <LinearGradient> в методе рендеринга.?

PS: я пытался обернуть компонент <MyApp /> компонентом <LinearGradient> в app.js, но похоже, что компонент <MyApp /> покрывает весь экран собственным фоном, поэтому линейный градиент не можетне видно.

Код навигатора

const HomeStack = createStackNavigator({
  Home: {
    screen: Home
  },
  Results: {
    screen: Results
  },
}, {
  navigationOptions: {
    header: null
  }
})


const MyApp = createDrawerNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      title: '...'
    }
  },
  Info: {
    screen: Info,
    navigationOptions: {
      title: '.....'
    }
  },
}, {
  drawerPosition: '....',
  contentOptions: {
    itemStyle: {
      alignSelf: '....',
    },
    labelStyle: {
      fontFamily: '....'
    }
  }
})

Answer 1

Это сработало для меня в моем App.js:

return (
  <LinearGradient colors={myGradientColor} style={{ flex: 1}}>
    <MainNavigator />
  </LinearGradient>
);

Попробуйте упростить ваш Навигатор до нескольких экранов, затем введите вложенный Навигатор, а затем введите весь ужас.

Iпришлось изменить последующие экраны в MainNavigator, чтобы исключить любой тип фона LinearGradient, а также работать в стиле flex: 1.