3

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

在此处输入图像描述

4

4 回答 4

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

请尝试以下步骤。

于 2021-01-03T19:24:44.813 回答
1

你可以使用react-native-bottomsheet-reanimated这个包，因为这个包有backdrop能力

yarn add react-native-bottomsheet-reanimated

您必须使用isBackDrop={true}andbackDropColor="#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>
    );
  }
}

在此处输入图像描述

于 2020-11-17T08:23:59.243 回答
0

你应该用以下方式包装你的代码：

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

注意：除了底页View。

于 2020-11-17T07:58:25.853 回答
0 
  <BottomSheet initialSnapIndex={0} snapPoints={snapPoints}>
    <BottomSheetScrollView style={{backgroundColor: '#341f97'}}>
      <View>
        <Text>test</Text>
      </View>
    </BottomSheetScrollView>
  </BottomSheet>

将 Backgroundcolor 赋予 BottomSheetScrollView 以更改 Bottom Sheet 的背景颜色

于 2020-12-27T14:55:21.390 回答