反应原生底片底部透明

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",
  },
});

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

Answer 1

TLDR：工作源code。请注意，此解决方案可能会得到 乱七八糟的。

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

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

所以，我所做的是，从只有五个文件的react-native-modal 中提取所有源代码code 并修改此源代码。我为react-native-modal 添加了一个名为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，例如更改阴影的颜色和阴影的不透明度等。