反应具有不同顶部和底部背景颜色的本机视图容器

React native view container with different top and bottom background color

正在尝试创建带有软边框的视图。页眉应该有不同的颜色，页脚也应该有不同的颜色。我尝试了所有的可能性，但无法弄清楚。目前我有下面的代码，它创建了一个带有软边框的视图，我想实现这个。

<View style={{borderWidth: 1, borderRadius: 10, padding: 10}}>
      <View>
            <Text style={styles.name}>
                SECTOR REPORTS
            </Text>
            <Button title="ADD SECTOR REPORT"/>
    </View>

您可以在容器视图上设置 overflow: hidden，但它仅适用于 iOS。

Android

不支持溢出：隐藏

检查这个 issue

如果你想在 Android 上实现这一点，你可以在页眉和页脚组件上使用这些样式道具

  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomRightRadius
  • borderBottomLeftRadius

这里有一个例子：demo