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

Question

我想设计一个react-native的View但是无法实现

只需按照附件 link 了解我正在尝试使组件看起来像什么。

非常感谢。

Sample Like this

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