react-native ListView的属性flexWrap为wrap失效解决

最近在参照某些例子学习React-native 开发iOS和Android的app时，碰到如标题所示的问题：

ListView的属性flexWrap为wrap不起作用。

如下可以看到每一行的其实是有10个图标的，自动换行之后，第一页的下满三个不见了：





代码如下：

大家可以看：

flexDirection:'row',

flexWrap:'wrap',

采取了，横向，自动换行，效果是达到了了，可是，下面的换行后的图标确是不见了！！

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

import Dimensions from 'Dimensions';
var {width,height} = Dimensions.get('window');

export default class TopListView extends Component{

static defaultProps ={
dataArr : []
}

constructor(props){
super(props);
var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
this.state={
dataSource:ds.cloneWithRows(this.props.dataArr),
}

}

render() {
return (
<ListView
dataSource = {this.state.dataSource}
renderRow={this.renderRow.bind(this)}
contentContainerStyle={styles.contentViewStyle}
scrollEnabled={false}
/>
)
}

renderRow(rowData){
return (
<View style={styles.cellStyle}>
<Image source={{uri:rowData.image}} style={{width:52,height:52}}/>
<Text>{rowData.title}</Text>
</View>
);
}
}

const styles = StyleSheet.create({
contentViewStyle:{
flexDirection:'row',
flexWrap:'wrap',
// 屏幕宽度
width:width,
},
cellStyle:{
}
});

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
50
51
52
53
54
55
56
57
58
59
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
50
51
52
53
54
55
56
57
58
59
踩坑之后的解决方法：

解释原因：由于在rn 0.28之后的版本上官方已经修改了

flexWrap:'wrap'

的工作方式了，之前版本的是

flexWrap:'wrap'

和默认的

alignItems: 'stretch'

是一起工作的；如果是0.28之后的版本，你需要加上

alignItems: 'flex-start'

如下：

contentViewStyle:{
flexDirection:'row',
flexWrap:'wrap',
alignItems:'flex-start',
// 屏幕宽度
width:width,
},

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8