如何在反应本机中设置我的视图样式以制作功能区？

Question

我想设计一个反应本机的视图，但无法实现相同的目标。

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

预先致谢。

像这样的示例

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>