react-native - 在 android 上响应 native ScrollView 。滚动时子项与边框半径重叠

Question

在android上，当我将边框半径应用于 ScrollView 时，内部容器会忽略外边框半径，我无法弄清楚如何使其符合。这是在 Pixel 2 模拟器上，红色虚线显示了底层边界半径和重叠的位置。代码只是一个标准的 ScrollView ，我用来仔细检查它发生在它所做的最简单的 ScrollView 实现上。

  <ScrollView
    contentContainerStyle={{
      alignItems: 'center',
      justifyContent: 'space-between',
    }}
    style={{
      padding: 20,
      backgroundColor: 'green',
      borderTopLeftRadius: 45,
      borderTopRightRadius: 45,
    }}>
    <View
      style={{
        width: '100%',
        height: 400,
        borderRadius: 20,
        backgroundColor: 'red',
      }}
    />
    <View
      style={{
        width: '100%',
        height: 400,
        borderRadius: 20,
        backgroundColor: 'red',
      }}
    />
    <View
      style={{
        width: '100%',
        height: 400,
        borderRadius: 20,
        backgroundColor: 'red',
      }}
    />
    <View
      style={{
        width: '100%',
        height: 400,
        borderRadius: 20,
        backgroundColor: 'red',
      }}
    />
  </ScrollView>

Answer 1

只需包装 ScrollView 与 查看 并设置 overflow: 'hidden' ，像波纹管代码一样构建您的 View 。它将强制所有 subview 到 hidden如果溢出。

<View
  style={{ 
      borderRadius: 45l
      overflow: 'hidden',
  }}
>
  // ->> Put your scrollview in here
  <Scrollview>
    {...children}
  </Scrollview>
</View>