Question

我使用反应原生的pinterest风格的应用程序。我写了这个：

'use strict';

var React = require('react-native');

var {
  AppRegistry,
  ScrollView,
  Text,
  StyleSheet,
  Dimensions,
  ListView,
  View,
  ToolbarAndroid,
  Image,
} = React;

var Dimensions = require('Dimensions');
var w = Dimensions.get('window');
var r = (w.width / 2) / 500;

var REQUEST_URL = 'http://www.wisgoon.com/api/v6/post/user/8090/';


var new_wisgoon = React.createClass({
  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  },
  componentDidMount: function() {
    this.fetchData(REQUEST_URL);
  },

  fetchData: function(url) {
    fetch(url)
    .then((response) => response.json())
    .then((responseData) => {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(responseData.objects), 
        loaded: true,
      });
    })
    .done();
  },

  render: function() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ScrollView width={w.width} height={5500}>
      <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderPost}
      contentContainerStyle={styles.items}
      style={styles.itemsBox}
      />
      </ScrollView>
      );
  },

  renderLoadingView: function() {
    return (
      <View style={styles.item}>
      <Text>
      Loading posts...
      </Text>
      </View>
      );
  },

  checkThumb: function(obj){
    if (obj) {
      return true;
    }
    return false;
  },

  renderPost: function(post) {
    return (
      <View style={[styles.item, {width: (w.width / 2) - 7}]}>
        <Image source={{uri: post.images.low_resolution.url}} 
        style={[{ width: post.images.low_resolution.width * r, height: post.images.low_resolution.height * r }]} 
        />

        <View style={styles.post_text_box}>
          <Text style={styles.post_text}>{post.text}</Text>
        </View>
      </View>
      );
  },
});

var styles = StyleSheet.create({
    itemsBox: {
        marginLeft: 5,
        marginRight: 5,
        height: 3500,
    },
    items: {
        flexDirection: 'column',
        flex: 1,
        flexWrap: 'wrap',
    },
    item: {
        flexDirection: 'column',
        backgroundColor: '#F5FCFF',
        borderWidth: 1,
        borderColor: '#555',
        marginRight: 5,
        marginTop: 5,
    },
    post_text_box: {
        padding: 20,
    },
});

AppRegistry.registerComponent('new_wisgoon', () => new_wisgoon);

结果很好，但ListView只显示了20个帖子中的11个：

我猜它与itemBox中的高度有关。当我设置itemBox高度3500时，在图像下方显示，当我删除它时，图像逐行列出。我该怎么办？

itemsBox: {
    marginLeft: 5,
    marginRight: 5,
    height: 3500,
},

Answer 1

您可以使用React-Native GirdView：

https://www.npmjs.com/package/react-native-gridview

React-native - 带有flexbox的Pinterest风格

1 个答案: