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 開始。但底部背景將是透明的，我可以點擊底部專案。
uj5u.com熱心網友回復：
TLDR：作業源代碼。請注意，此解決方案可能會變得混亂。
如果我們查看then的源代碼，react-native-btr我們會看到該BottomSheet組件實際上是一個Modal組件，從react-native-modal傳遞 4 個基本 props 到react-native-modal如下所示
<Modal
isVisible={visible}
onBackButtonPress={onBackButtonPress}
onBackdropPress={onBackdropPress}
style={{ justifyContent: "flex-end", margin: 0 }}
>
{children}
</Modal>
所以，我所做的是，從只有五個檔案的所有源代碼中提取react-native-modal并修改此源代碼。我已經把一個新的道具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例如更改陰影的顏色和陰影的不透明度等。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/402353.html
標籤：
上一篇：RevenueCat顯示價格
下一篇：為什么狀態沒有改變