React Native Flatlist高度动态

问题描述 投票:0回答:1

我使用的是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不再滚动。因为它加载了屏幕之外的所有行。用平面列表设置动态高度的正确方法是什么?

Picture Attached

react-native dynamic height react-native-flatlist native-base
1个回答
0
投票

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

这里是演示(请不要忘记选择iOS或android选项卡以查看该应用程序]

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

© www.soinside.com 2019 - 2024. All rights reserved.