React Native Grid View:Flexbox wrap 不起作用 [英] React Native Grid View: Flexbox wrap not working

问题描述

React Native 0.32 中似乎存在一个错误.以下代码在 0.20 和 0.24 中运行良好，您可以在 RN Play 链接中看到.

我所看到的(React Native 0.32):

请帮我解决这个问题.

解决方案

您应该将 alignItems: 'flex-start' 添加到您的 list 的样式中.>

列表:{justifyContent: '中心',flexDirection: '行',flexWrap: '包裹',alignItems: 'flex-start',背景颜色:蓝色"},

React Native 0.28 发生了重大变化改变了 flex-wrap 的行为:

<块引用>

由于性能调整 flexWrap: wrap 不再与 alignItems: 'stretch'(默认)一起使用.如果您使用 flexWrap: wrap，您可能还想添加 alignItems: 'flex-start' 样式.

There seems to be a bug in React Native 0.32. The following code is working fine in 0.20 and 0.24, as you can see in the RN Play link.

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

Expected Output (as you see on RNPlay w/ react native 0.24.1):

What I'm seeing (React native 0.32):

Please help me figure this out.

解决方案

You should add alignItems: 'flex-start' to your list's style.

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

There was a breaking change in React Native 0.28 that changed the behaviour of flex-wrap:

Due to performance tweaks flexWrap: wrap no longer works together with alignItems: 'stretch' (the default). If you use flexWrap: wrap you probably will want to add the alignItems: 'flex-start' style as well.

这篇关于React Native Grid View:Flexbox wrap 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！