React本地网格视图：Flexbox换行不起作用

React Native 0.32似乎有一个错误。 下面的代码在0.20和0.24中正常工作，你可以在RN Play链接中看到。

https://rnplay.org/apps/W5k6Xg

'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { AppRegistry, ListView, StyleSheet, Text, View, Image } = ReactNative; var GridLayoutExample = React.createClass({ getInitialState: function() { var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return { dataSource: ds.cloneWithRows([ { name: 'John', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619232-84.png' }, { name: 'Joel', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619230-84.png' }, { name: 'James', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619168-84.png' }, { name: 'Jimmy', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619130-84.png' }, { name: 'Jackson', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619098-84.png' }, { name: 'Jillian', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/618793-84.png' }, { name: 'Julie', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/618803-84.png' }, { name: 'Devin', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/618706-84.png' } ]) }; }, render: function() { return ( // ListView wraps ScrollView and so takes on its properties. // With that in mind you can use the ScrollView's contentContainerStyle prop to style the items. <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={this._renderRow} /> ); }, _renderRow: function(rowData: string, sectionID: number, rowID: number) { return ( <View> <View style={styles.row}> <Image style={styles.thumb} source={{uri: rowData.image}} /> <Text style={styles.text}> {rowData.name} </Text> </View> </View> ); } }); var styles = StyleSheet.create({ list: { justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap', backgroundColor: "blue" }, row: { justifyContent: 'center', padding: 5, width: 100, height: 100, backgroundColor: '#F6F6F6', borderWidth: 1, borderColor: '#CCC', alignItems: 'center' }, thumb: { width: 64, height: 64 }, text: { marginTop: 5, fontWeight: 'bold' } }); AppRegistry.registerComponent('SampleApp', () => GridLayoutExample); 

预期输出（正如你在RNPlay上看到的那样，反应原生0.24.1）：

我所看到的（React native 0.32）：

请帮我弄清楚这一点。

Answer 1

你应该添加alignItems: 'flex-start'到你的list样式。

 list: { justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start', backgroundColor: "blue" }, 

React Native 0.28发生了一个突变，改变了flex-wrap的行为：

由于性能的调整flexWrap: wrap不再与alignItems: 'stretch' （默认）一起工作。 如果你使用flexWrap: wrap你可能会想要添加alignItems: 'flex-start'样式。