如何在 react-native 中设置我的视图以制作功能区？

【问题标题】：How do I style my View in react-native for making ribbon?如何在 react-native 中设置我的视图以制作功能区？
【发布时间】：2020-02-23 22:14:07
【问题描述】：

我想设计一个 react-native 的视图，但无法实现。

只需点击随附的链接即可了解我正在尝试使组件看起来像什么。

提前致谢。

Sample Like this

【问题讨论】：

标签： reactjs react-native user-interface expo stylesheet

【解决方案1】：

您可以根据需要更新值。

    <View>
      <View
        style={{
          width: 120,
          padding: 10,
          paddingLeft: 20,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'red',
          height: 40,
          borderTopRightRadius: 3,
          borderBottomRightRadius: 3,
        }}>
        <Text style={{color: '#FFF', fontWeight: 'bold'}}>Overview</Text>
      </View>
      <View
        style={{
          width: 0,
          height: 0,
          backgroundColor: 'transparent',
          borderStyle: 'solid',
          borderRightWidth: 20,
          borderTopWidth: 20,
          borderRightColor: 'transparent',
          borderTopColor: 'red',
          transform: [{rotate: '90deg'}],
        }}
      />
    </View>

【讨论】：