React Native Grid View: Flexbox wrap не работает

Question

Кажется, что ошибка в 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 родной 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'.