ネイティブグリッドに反応する：フレックスラップが機能しない

Question

React Native 0.32にバグがあるようです。次のコードは、RN Playリンクに表示されているように、0.20と0.24で正常に動作しています。私は（ネイティブ0.32に反応）見ている何

：

出力（あなたは0.24.1ネイティブ反応/ wのRNPlayに見るように）期待

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); 

私はこれを理解するのを助けてください。

Answer 1

listさんのスタイルにalignItems: 'flex-start'を追加してください。

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

flex-wrapの振る舞いを変えReact Native 0.28で互換性に影響する変更はありませんでした：

が原因のパフォーマンスの調整にflexWrap: wrapもはやalignItems: 'stretch'（デフォルト）と一緒に動作します。 flexWrap: wrapを使用する場合は、おそらくalignItems: 'flex-start'スタイルも追加することをお勧めします。