使用不同的顶部和底部背景颜色来反应本机视图容器

Question

尝试使用柔化边框创建视图。标题应具有不同的颜色，页脚应具有不同的颜色。我尝试了所有的可能性，但无法弄清楚。目前我有以下代码创建一个带有软边框的视图，我想实现这一点。

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

Answer 1

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

溢出：Android不支持隐藏

检查此issue

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

• borderTopLeftRadius
• borderTopRightRadius
• borderBottomRightRadius
• borderBottomLeftRadius

这是一个例子：demo