React-native-使用Flexbox的Pinterest样式 [英] React-native - Pinterest style with flexbox

问题描述

我对pinterest风格的应用程序使用react-native.我是这样写的:

I use react-native for pinterest style app. I wrote this:

'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个:

Result is fine, but ListView just shows 11 from 20 posts:

我想这与itemBox中的高度有关.当我设置itemBox高度3500时，在图像显示下方，而当我将其删除时，图像则像行一样逐一列出. 我该怎么办?

I guess it's about height in itemBox. When I set itemBox height 3500, below image displays and when I remove that, images lists one by one like row. What can I do?

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

推荐答案

您可以使用React-Native GirdView:

You can using React-Native GirdView:

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

这篇关于React-native-使用Flexbox的Pinterest样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！