反应本机rn_bottom_drawer的动态高度

Question

我正在将rn-bottom-drawer用于我的应用的抽屉式实现。我尝试了多种方式，例如PixelRatio，ModerateScale，If-else，但它无法设置屏幕高度范围，但我无法设置这样的containerHeight使其完美适用于所有设备屏幕，并且抽屉和屏幕底部之间没有空间。

我的代码：

<BottomDrawer
            ref={"_drawer"}
            containerHeight={moderateScale(270)}
            startUp={false}
            backgroundColor={null}
            downDisplay={moderateScale(200)}
            onExpanded={() => this.setState({ isRecentSearchesExpanded: true })}
            onCollapsed={() => this.setState({ isRecentSearchesExpanded: false })}
        >
            <View style={{
                width: screenWidth,
            }}>
                <ImageBackground source={require('../../assets/tabBkgd.png')} style={{ height: "100%", width: screenWidth, justifyContent: "center", backgroundColor: "transparent" }} resizeMode="stretch">
                    {/* some views here */}
                </ImageBackground>
            </View>
        </BottomDrawer>

Answer 1

这是我用于动态高度和宽度的包：

rn-responsive。

基本上，您要做的就是检查手机的高度是否合适。假设您获得80并且deviceHeight为640，那么您所需要做的就是计算(80/640)*100 i.e 12.5，现在

只需：

import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
<BottomDrawer
            ref={"_drawer"}
            containerHeight={hp("12.5%")}

及其固定。希望能帮助到你。如有疑问，请随时