无法在 react-native-bottom-sheet 中使底部的角 sheet 变圆

Question

我试图通过将 style 道具传递给 react-native-bottom-sheet 来使 sheet 提供的底部角变圆。但是圆角被我不知道的东西重叠了。如何使边角变圆？

截图：

代码：

<BottomSheet
    style={{ 
        flex: 1, 
        borderWidth: 5, 
        borderColor: "red", 
        backgroundColor: "blue", 
        borderRadius: 50 
    }} 
    index={1}
    ref={bottomSheetRef}
    snapPoints={snapPoints}
    onChange={handleSheetChange}
>
    <View 
        style={{ 
            backgroundColor: "lightgreen", 
            marginTop: 30,
            flex: 1, 
            justifyContent: 'center', 
            alignItems: 'center' 
        }}
    >
        <View style={{ backgroundColor: "white" }}>
            <Text>
                I am back
            </Text>
        </View>
    </View>
</BottomSheet>

这个 BottomSheet 组件被包裹在 View 中 flex: 1

Answer 1

刚刚将 overflow: hidden 添加到 BottomSheet 的 style 属性中，它起作用了。

Answer 2

我运行遇到了同样的问题，但找到了另一个解决方案，因为我使用的 Handler 在 BottomSheet 之外，所以添加 overflow: 'hidden' 只是隐藏了我的 Handler.

阅读代码我意识到传递给 BottomSheet 的 style 属性被添加到代码中作为 containerStyle here，但是组件负责定义圆角实际上是BackgroundComponent，它的样式中有边框半径。

因此，为了获得具有自定义圆角半径的 BottomSheet，最好添加一个单独的 backgroundComponent 并进行我们想要的所有修改。

像这样：

function customBackground({ pointerEvents, style }) {
  return (
    <View
      pointerEvents={pointerEvents}
      style={[styles.bgContainer, style]}
    />
  );
}

function renderSheet(){

 return(
    <BottomSheet
      index={1}
      ref={bottomSheetRef}
      snapPoints={snapPoints}
      onChange={handleSheetChange}
      backgroundComponent={customBackground}
    >
      <View
        style={{
            backgroundColor: "lightgreen",
            marginTop: 30,
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        }}
      >
        <View style={{ backgroundColor: "white" }}>
            <Text>
                I am back
            </Text>
        </View>
      </View>
    </BottomSheet>
  ;)
}

const styles = StyleSheet.create({
  bgContainer: {
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    backgroundColor: "blue"
  },
})

无法在 react-native-bottom-sheet 中使底部的角 sheet 变圆

Not able to make corners of bottom sheet rounded in react-native-bottom-sheet

react-native

bottom-sheet