// Step 1: Import Libraries

import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import Animated from "react-native-reanimated";
import BottomSheet from "reanimated-bottom-sheet";

export const BottomSheetMask: React.FC = () => {

  // Step 2: Add The Following Lines In Your Component

  const sheetRef = useRef < BottomSheet > null;
  let fall = new Animated.Value(1);
  const animatedShadowOpacity = Animated.interpolate(fall, {
    inputRange: [0, 1],
    outputRange: [0.5, 0],
  });

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello React Native!</Text>
      <Button onPress={() => sheetRef.current?.snapTo(0)}>
        Open Bottom Sheet
      </Button>

      // Bottom Sheet Component

      <BottomSheet
        ref={sheetRef}
        callbackNode={fall} // Add ** fall ** Variable here.
        snapPoints={[700, 300, 0]}
        initialSnap={2}
        renderHeader={() => {
          // Your Header Component
        }}
        renderContent={() => {
          // Your Content Component
        }}
      />

      // Step 3: Add The Following Code Inside Your Component

      <Animated.View
        pointerEvents="none"
        style={[
          {
            ...StyleSheet.absoluteFillObject,
            backgroundColor: "#000",
            opacity: animatedShadowOpacity,
          },
        ]}
      />
    </View>
  );
};

请尝试以下步骤。

您可以使用react-native-bottomsheet-reanimated此软件包，因为此软件包具有backdrop功能

yarn add react-native-bottomsheet-reanimated

你必须使用isBackDrop={true}和backDropColor="#eee"来改变背景的颜色

import BottomSheet from 'react-native-bottomsheet-reanimated';
 
class Example extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <BottomSheet
          bottomSheerColor="#FFFFFF"
          ref="BottomSheet"
          initialPosition={'50%'} 
          snapPoints={['50%', '100%']}
          isBackDrop={true}
          isBackDropDismissByPress={true}
          backDropColor="red"             //======> this prop will change color of backdrop
          
          header={
            <View>
              <Text style={styles.text}>Header</Text>
            </View>
          }
          body={
            <View style={styles.body}>
              <Text style={styles.text}>Body</Text>
            </View>
          }
        />
      </View>
    );
  }
}

您应该使用以下内容 Package 代码：

<Animated.View
            style={{
              opacity: Animated.add(0.1, Animated.multiply(fall, 1.0)),
              flex: 1,
            }}>
  <Animated.View/>

注：底部板材View除外。

<BottomSheet initialSnapIndex={0} snapPoints={snapPoints}>
    <BottomSheetScrollView style={{backgroundColor: '#341f97'}}>
      <View>
        <Text>test</Text>
      </View>
    </BottomSheetScrollView>
  </BottomSheet>

为BottomSheetScrollView给予背景色更改底部工作表的背景色