react原生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%")}

而且它是固定的。希望能有所帮助。请不要有疑问