Question

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

'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

您应该将.navbar-nav > li > .dropdown-menu{ display: block; padding: 0; z-index: 9000; position: absolute; -webkit-border-radius: 0px !important; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125); border-radius: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; -ms-filter: "alpha(opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); -moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); -o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); -ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); } .navbar-nav > li.open > .dropdown-menu{ -webkit-transform-origin: 29px -50px; -moz-transform-origin: 29px -50px; -o-transform-origin: 29px -50px; -ms-transform-origin: 29px -50px; transform-origin: 29px -50px; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; }添加到alignItems: 'flex-start'的样式中。

list

React Native 0.28发生了重大变化，改变了list: { justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start', backgroundColor: "blue" },的行为：

由于性能调整flex-wrap不再与flexWrap: wrap（默认值）一起使用。如果您使用alignItems: 'stretch'，则可能还需要添加flexWrap: wrap样式。

React Native Grid View：Flexbox wrap无法正常工作

1 个答案: