React-native - 带有 flexbox 的 Pinterest 风格

Posted 2023-03-06

【中文标题】React-native - 带有 flexbox 的 Pinterest 风格

【英文标题】：React-native - Pinterest style with flexbox

【发布时间】：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吗？

【参考方案1】：

你可以使用 React-Native GirdView：

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