React-native - 带有 flexbox 的 Pinterest 风格答案

【问题标题】：React-native - Pinterest style with flexboxReact-native - 带有 flexbox 的 Pinterest 风格
【发布时间】：2016-05-03 06:14:56
【问题描述】：

我将 react-native 用于 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,
},

【问题讨论】：

尝试在 ScrollView 和 ListView 上使用 flex:1。您不必指定高度。
@NaderDabit 不要更改
这个问题有点不清楚。您能否更具体地说明问题。
@Michael_B tnx 用于回答，在 API 请求中，响应包含 20 行，但 ListView 显示 11 行，我猜有些行是隐藏的什么的！就像 css 中的 overflow:hidden 一样！
你试过min-height而不是height吗？

标签： css flexbox react-native

【解决方案1】：

你可以使用 React-Native GirdView：

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

【讨论】：