创建透明叠加层作为底部工作表的背景

Question

我使用这个[插件][1]创建了底部工作表 下面是代码 [1]：https://github.com/gorhom/react-native-bottom-sheet

问题是透明覆盖也会为底页创建不透明度。 有什么方法可以创建全屏透明覆盖层，然后创建适当的底片，而没有任何不透明度或透明度。

const BottomSheet: React.FC<Props> = props => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);
  
  const styles = StyleSheet.create({
    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.overlay}>
      <BottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={['50%', '50%']}
        backgroundStyle={styles.backgroundContainer}
        containerStyle={{
          borderTopLeftRadius: 24,
          borderTopRightRadius: 24,
        }}
        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>
  );
};

Answer 1

将不透明度添加到背景颜色。例如：背景颜色：'rgba(0,0,0,0.5)',