4

我想在Modal. 我正在使用reanimated-bottom-sheet本机模式并做出反应。

但是当我使用BottomSheet内部Modal手势时不起作用并且无法BottomSheet通过向下滑动来关闭。

我搜索了一下，发现这是RCGH个问题。

所以我决定使用View而不是Modal.

但View不包括Header。

这是底部表代码：

<View style={BottomSheetStyles.container}>
  <TouchableWithoutFeedback onPress={handleOutsidePress}>
    <Animated.View style={[BottomSheetStyles.dropShadow, { opacity }]} />
  </TouchableWithoutFeedback>
  <Animated.Code exec={onChange(position, [cond(eq(position, 1), call([], onClose))])} />
  <BottomSheet
    ref={sheet}
    initialSnap={zeroIndex}
    snapPoints={snapPoints}
    callbackNode={position}
    renderHeader={() => <View style={BottomSheetStyles.header} />}
    renderContent={() => (
      <View style={[BottomSheetStyles.content, { height: "100%" }]}>{children}</View>
    )}
  />
</View>

这是样式：

const BottomSheetStyles = StyleSheet.create({
    container: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        flex: 1,
        zIndex: 100,
    },
    dropShadow: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        flex: 1,
        zIndex: 100,
        backgroundColor: "rgba(0, 0, 0, 0.3)",
    },
    header: {
        backgroundColor: Colors.greyC4C,
        width: 90,
        height: 7,
        margin: 5,
        alignSelf: "center",
        borderRadius: 11,
    },
    content: {
        backgroundColor: Colors.whiteFFF,
        paddingTop: 18,
        borderTopLeftRadius: 22,
        borderTopRightRadius: 22,
    },
});

所以问题可以通过解决手势Modal或做一些事情来Header解决View。

我正在使用React Navigation.

4

0 回答 0