Question

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

这是我的代码

<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>

如您所见，我设置了平面列表高度screenHeight * 0.38，因此，在某些手机中它是完美的，但在某些手机中有一些空白。（见附图）我试图通过其他示例使其充满动态，以填充其余的空间，例如 How to set the style attribution to fill the rest space? （尽管我需要填写直到页脚栏），此示例对于常规组件效果很好，但不适用于平面列表。 Flatlist不再滚动。因为它加载了屏幕之外的所有行。用Flatlist设置动态高度的正确方法是什么？

Answer 1

我可以通过使用不同的选项并从How to set the style attribution to fill the rest space?寻求帮助来解决此问题不幸的是，Grid，Row无法与此配合使用。

这是演示（不要忘记选择iOS或android选项卡来查看应用程序）

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

反应本机Flatlist高度动态

1 个答案: