React Native / react-native-reanimated-bottom-sheet /如何更改表格后面视图的背景颜色？

问题描述

在演示中，最后两个示例具有深色背景，但是我没有看到将其从透明更改为深色的方法，并且在源代码中没有看到与样式或颜色相关的任何内容。有什么建议吗？

解决方法

// 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>
  );
};

请尝试以下步骤。

您应该使用以下代码包装代码：

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

注意：底部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>
    );
  }
}

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

给BottomSheetScrollView赋予Backgroundcolor来改变Bottom Sheet的背景色

react-native react-native-reanimated