listView和FlatList的flexGrow默认值为1

发表于 | 分类于

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

看下具体的列子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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改成这样，就好了：

1
2
3
4
list:{
    backgroundColor: 'red',
    flexGrow: 0,  
},

显示成：

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

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