我使用的是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不再滚动。因为它加载了屏幕之外的所有行。用平面列表设置动态高度的正确方法是什么?
我可以通过使用不同的选项并从How to set the style attribution to fill the rest space?获得帮助来解决此问题不幸的是,Grid,Row无法与此一起使用。
这里是演示(请不要忘记选择iOS或android选项卡以查看该应用程序]