Css 如何使用flexbox在React Native中创建包装器视图和容器视图？

我想用React Native创建这个UX设计，但我想知道用React Native创建这个CSS设计的最佳方法是什么

仅供参考：我只关心外部包装（下图中的数字1）、容器（下图中的数字2）以及其中的项目的CSS

现在我有这个密码

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,
  },

如何在2号图片中提供单独的背景色，即蓝色和灰色

无法使用此选项提供单独的背景色：

背景色：线性渐变（palette.darkIndigo“50%”，palette.Gray“0%”）

我不想创造分离

---

我正在寻找一种css方法，在这种方法中，我们可以为同一个视图提供两种背景色

通过简单的解决方案解决了问题：

 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}>

包装器：{
//背景颜色：palette.darkIndigo，
背景颜色：调色板。浅灰色，
身高：尺码。大号*4+尺码。中号*2，
弹性：1，
},
容器：{
位置：'绝对'，
高度：尺寸。巨大*4+尺寸。中等，
页边空白：中-4号，
背景颜色：palette.white，
宽度：size.ground*3+size.large-7，
borderBottomColor:palette.green，
},
靛蓝背景：{
高度：尺寸。巨大*2+3，
背景颜色：palette.darkIndigo，
},

如果您的内容视图的样式为绝对位置，您只需使用两个视图即可获得不同的颜色

我不想为此创建单独的视图。以下是类似问题的解决方案：