React Native Flatlist 高度动态

Question

我正在使用 react native 0.59，对于布局，我正在使用 native base 和 react-native-easy-grid。由于移动设备的尺寸不同，我需要将 flatlist 高度动态化。它几乎从屏幕中间开始，我想显示它直到页脚栏。

这是我的代码

<Container>
<ImageBackground source={require(imagePath+"bg-default.png")}
                                 style={{width: screenWidth, height: screenHeight, resizeMode: 'cover'}} >

    <Content scrollEnabled={false}>

        <Grid>
            <Row style={{ height: screenHeight*0.36, alignItems:'center',justifyContent:'center' }}>
                <Image style={styles.iconImage} source={{ uri: this.state.image_url.displayImage}}/>

            </Row>

            <Row style={{ backgroundColor: "#1a0568", height:screenHeight*0.058, textAlignVertical: 'center', alignItems: 'center'}}>
                <Text style={styles.titleStyle}>{"Information list"}</Text>            
            </Row>

            <Row style={{ backgroundColor: 'none',height:screenHeight*0.38}}>
                <FlatList
                    style={[styles.listContainer]}
                    data={this.state.informationList}
                    keyExtractor={this._keyExtractor}
                    renderItem={this._renderItem}
                />
            </Row>

        </Grid>
    </Content>
</ImageBackground>
</Container>

如您所见，我设置了 flatlist 高度 screenHeight*0.38，因此，在某些手机上它是完美的，但在某些手机上有一些空 space。（见附图）我试图用不同的例子让它变得动态来填充 space 的其余部分，比如（虽然我需要填充到页脚栏），这个例子适用于普通组件但它不适用于 flatlist。 Flatlist 不再滚动。因为它加载了屏幕外的所有行。使用 flatlist 设置动态高度的正确方法是什么？

Answer 1

我可以通过尝试不同的选项并寻求的帮助来解决它不幸的是，Grid、Row 不适用于此。

这是演示（不要忘记 select iOS 或 android 标签来查看应用程序）

https://snack.expo.io/@shaondebnath/layouttest

React Native Flatlist 高度动态

React Native Flatlist height dynamic

react-native

dynamic

height

react-native-flatlist

native-base