css - 如何在 react-native 应用程序中裁剪边框？

Question

这是我想通过布局中的绿色按钮实现的图像。

注意到 View B 上方的边框了吗？我希望底栏的边框围绕它有一条曲线。

为此，我创建了 View 结构 -

import React from 'react'
import { Text, View } from 'react-native'

class OkScreen extends React.Component {
  static navigationOptions = {
    header: null
  }

  render () {
    return (
      <View
        style={{
          flexDirection: 'column',
          alignSelf: 'stretch',
          flexGrow: 1
        }}
      >
        <View
          style={{
            backgroundColor: 'yellow',
            flexGrow: 1
          }}
        />
        <View
          style={{
            borderWidth: 1
          }}
        />
        <View
          style={{
            backgroundColor: 'white',
            flexDirection: 'row',
            justifyContent: 'space-evenly',
            alignItems: 'center',
            height: 150,
            borderTopWidth: 10,
            borderTopColor: 'white'
          }}
        >
          <View
            style={{
              borderWidth: 10,
              alignItems: 'center',
              justifyContent: 'center',
              height: 152,
              width: 152,
              borderRadius: 76,
              bottom: 40
            }}
          >
            <View
              style={{
                height: 150,
                width: 150,
                borderRadius: 75,
                backgroundColor: 'green',
                alignItems: 'center',
                justifyContent: 'center',
                borderWidth: 10,
                borderColor: 'white'
              }}
            >
              <Text
                style={{
                  fontSize: 40
                }}
              >
                B
              </Text>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default OkScreen

这种方法没有用，它最终看起来像这样 -

我应该采取什么方法来完成这项工作？如有任何建议，我们将不胜感激。

Answer 1

您可以在包含按钮的白色 View 后面添加一个白色圆形 View ，为该圆圈提供所需的边框，并为按钮提供 zIndex = 3 和包含 View zIndex = 2。

使用 position: absolute 将 View 定位在彼此之上，调整它的上、下、左、右。提示:使用 StyleSheet 组件并将所有样式保留在那里，并且在设置宽度、高度等时不要依赖点。使用 '%' 或 const {width, height} Dimensions.get('window') 并使用它们使您的应用程序响应