listView和FlatList的flexGrow默认值为1

最新推荐文章于 2025-05-20 17:03:20 发布

阿飞正传的阿飞

最新推荐文章于 2025-05-20 17:03:20 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react-native bugFix 文章标签： listview react-native flexGrow

本文链接：https://blog.youkuaiyun.com/njafei/article/details/76162653

react-native 同时被 2 个专栏收录

10 篇文章

订阅专栏

bugFix

2 篇文章

订阅专栏

在使用ListView和FlatList时遇到高度适配问题，发现它们的flexGrow默认值可能为1，导致无法自动适应内容高度。通过设置flexGrow属性为0，列表可以正确自适应高度。这个问题在react-native版本0.43.4中出现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到了适配的问题，有个列表，需要自适应高度，按理说默认应该就是自适应的，但是在实际中发现，其会和另外一个视图1：1 ，然后就发现只有设置其flexGrow: 0的时候，它才会自动适配高度，说明它的flexGrow默认值为1.

看下具体的列子：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
} from 'react-native';

export default class testListView extends Component {
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
            ])
        };
    }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.blackView} />
        <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData}</Text>}
            style={styles.list}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    backgroundColor: '#F5FCFF',
  },
  list:{
    backgroundColor: 'red',
  },
  blackView: {
    flexGrow: 1,
    backgroundColor: 'black',
  }
});

AppRegistry.registerComponent('testListView', () => testListView);

这个UI看起来是这样：

如果style中的list改成这样，就好了：

list:{
    backgroundColor: 'red',
    flexGrow: 0,  
},

显示成：

综上，我怀疑FlatList和ListView的flexGrow默认值是1.有遇到类似问题的，不妨试试这样解决。

版本： “react-native”: “0.43.4”