Как создать вид оболочки и вид контейнера внутри React Native с помощью flexbox?

Question

Я хочу создать этот дизайн UX для React Native, но мне интересно, как лучше создать этот CSS дизайн в реактивном режиме?

К вашему сведению: меня волнует только CSS для внешней обертки (цифра 1 на рисунке ниже), контейнера (цифра 2 на рисунке ниже), а затем предметов внутри.

Сейчас у меня есть этот код

wrapper: {
    backgroundColor: palette.darkIndigo,
    height: size.huge * 4,
    width: '100%',
  },

  container: {
height: size.huge * 4,
    position: 'absolute',
    margin: size.medium-4,
    backgroundColor: palette.white,
    // width: '95%',
    width: size.huge*3 + size.large - 7,
  },

Как обеспечить отдельные цвета фона, например синий и серый, в пи c для числа 2.

Невозможно задать отдельный цвет фона, используя это:

backgroundColor: линейный градиент (palette.darkIndi go '50% ', palette.grey' 0% ')

Я не хочу создавать отдельный Я ищу для подхода css, где мы можем дать 2 цвета фона одному и тому же виду.

Answer 1

Получил решение простым решением:

 wrapper: {
    // backgroundColor: palette.darkIndigo,
    backgroundColor: palette.lightgrey,
    height: size.huge * 4 + size.medium * 2,
    flex: 1,
  },
  container: {
    position: 'absolute',
    height: size.huge * 4 + size.medium,
    margin: size.medium - 4,
    backgroundColor: palette.white,
    width: size.huge * 3 + size.large - 7,
    borderBottomColor: palette.green,
  },
  indigoBackground:{
    height: size.huge*2 + 3,
    backgroundColor: palette.darkIndigo,
  },





<View style={style.wrapper}>

        <View style={style.indigoBackground} />
        <View style={style.container}>
          <View style={style.bannerImage}>