React Native Bottom Sheet透明遮罩问题：如何避免弹窗继承透明度

问题原因 #

你将BottomSheet嵌套在了设置了opacity的overlay视图中，导致子组件继承了父组件的透明度属性，这是React Native中视图样式继承的正常表现。

解决方案 #

把遮罩层和Bottom Sheet拆分为同级视图，让两者互不嵌套，这样遮罩的透明度就不会影响Bottom Sheet的显示。具体调整如下：

• 新增一个外层容器包裹遮罩和Bottom Sheet
• 遮罩层保持全屏绝对定位和透明度设置
• 给Bottom Sheet设置更高的zIndex，确保它显示在遮罩上方

修改后的完整代码：

const BottomSheet: React.FC<Props> = props => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);
  
  const styles = StyleSheet.create({
    wrapper: {
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    overlay: {
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      opacity: 0.6,
      elevation: 24, 
      zIndex: 24,
      backgroundColor: 'black',
      justifyContent: 'center',
    },
    container: {
      flex: 1,
      flexDirection: 'column',
      width: '100%',
      backgroundColor: 'red',
    },
    contentContainer: {
      alignItems: 'center',
      height: '100%',
      overflow: 'visible',
    },
    imageContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
    },
    bodyContainer: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
    },
    buttonContainer: {
      height: 88,
      width: '100%',
      alignItems: 'center',
    },
    backgroundContainer: {
      backgroundColor: 'green',
   },
  });

  return (
    <View style={styles.wrapper}>
      {/* 独立的遮罩层 */}
      <View style={styles.overlay} />
      {/* Bottom Sheet 作为同级视图 */}
      <BottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={['50%', '50%']}
        backgroundStyle={styles.backgroundContainer}
        containerStyle={{
          borderTopLeftRadius: 24,
          borderTopRightRadius: 24,
          zIndex: 25 // 确保层级高于遮罩
        }}
        onChange={handleSheetChanges}>
        <View style={styles.imageContainer}>
          <Image source={props.imageSource} style={styles.largeImage} />
        </View>
        <View style={styles.bodyContainer}>{props.body}</View>
        <View style={styles.buttonContainer}>
          <Divider style={styles.divider} />
          <View style={styles.buttonRow}>
            <TouchableOpacity
              style={styles.bodyContainer}
              onPress={() => {
                props.onCancelAction();
              }}>
              <Text style={styles.cancelButtonText}>
                {props.cancelText ? props.cancelText : 'Cancel'}
              </Text>
            </TouchableOpacity>
            <Divider style={styles.verticalDivider} />
          </View>
        </View>
      </BottomSheet>
    </View>
  );
};

核心调整点 #

• 移除Bottom Sheet与遮罩的嵌套关系，改为同级视图
• 通过zIndex明确控制两者的层级顺序
• 遮罩层单独存在，不再包含任何子组件

内容的提问来源于stack exchange，提问作者IOSDev