反应本机底部 sheet 底部透明

Question

import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { BottomSheet } from "react-native-btr";

export default function BottomSheetDemo() {
  const [visible, setVisible] = useState(false);

  function toggle() {
    setVisible((visible) => !visible);
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={toggle}>
        <View style={styles.button}>
          <Text>Toggle BottomSheet</Text>
        </View>
      </TouchableOpacity>
      <BottomSheet
        visible={visible}
        onBackButtonPress={toggle}
        onBackdropPress={toggle}
      >
        <View style={styles.card}>
          <Text>Place your custom view inside BottomSheet</Text>
        </View>
      </BottomSheet>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    backgroundColor: "#fff",
    borderWidth: 2,
    borderRadius: 50,
    padding: 16,
  },
  card: {
    backgroundColor: "#fff",
    height: 250,
    justifyContent: "center",
    alignItems: "center",
  },
});

我正在使用上面的代码。所以我的问题是我得到了预期的底部 sheet。我希望它在底部上方 100px。这也很好用。但问题是我在底部和顶部模糊黑色背景。但我想要底部边距底部 100。它不会显示黑色地面。我将从 marginbottom:100 开始。但是底部的背景是透明的，我可以点击底部的项目。

Answer 1

TLDR: working source code. Be aware, this solution might get messy.

如果我们看到源 code of react-native-btr then we will see that the BottomSheet 组件实际上是 Modal 来自 react-native-modal 的组件，将 4 个基本道具传递给 react-native-modal，如下所示

<Modal
  isVisible={visible}
  onBackButtonPress={onBackButtonPress}
  onBackdropPress={onBackdropPress}
  style={{ justifyContent: "flex-end", margin: 0 }}
>
  {children}
</Modal>

所以，我所做的是，提取所有源代码 code from react-native-modal which is just five files and modify this source code. I have put a new prop for react-native-modal called bottomSpacing，以便用户可以更改底部间距。

回到 app.js 代码看起来像这样

  <Modal
    testID={"modal"}
    isVisible={isModalVisible}
    style={{ justifyContent: "flex-end", margin: 0 }} // this line was using in react-native-btr source
    bottomSpacing={BOTTOM_SPACING}>
    <View style={styles.card}>
      <Text>Place your custom view inside BottomSheet</Text>
    </View>
  </Modal>

这里，BOTTOM_SPACING同时用于bottomSpacing道具和styles.card如下

  card: {
    marginBottom: BOTTOM_SPACING,
    ...
  }

奖励：现在您可以使用 react-native-modal 的所有 features，例如更改阴影的颜色和阴影的不透明度等。

反应本机底部 sheet 底部透明

react native bottom sheet bottom transparent

react-native

bottom-sheet