Question

（我知道有一些网站可以分享反应性的例子，但我无法通过谷歌找到它们;“反应原生共享代码”只是提出了共享按钮的代码，同样的“示例” - 什么是一个很好的网站用于此？）

我有一个listview（感谢这个answer，归功于@ colin-ramsay）。我想做的是在每个listview中放入一些项目，让它们在容器内部对齐（复选框和同一行上的标签）。但我无法做到这一点因为我无法弄清楚为什么这20个项目的数组只显示10个项目。

警报显示时会显示20个项目（0-19）。

代码：

import React, {Component} from 'react';
import {View, Text, StyleSheet, ListView} from 'react-native';

var styles = StyleSheet.create({
  container:{
    marginTop:65,
    margin:10, backgroundColor:"#DDDDEE"
  },
  list:{
    height:400,
    marginTop:40,
    flexDirection:'row',
    flexWrap:'wrap', justifyContent:'center', alignItems:'flex-start'
  },
  item:{
    alignItems:'flex-start',
    backgroundColor:'red', width:40, height:40, margin:3, padding:3,
    justifyContent:'center', alignItems:'center'
  }
});

class TestCmp extends Component {

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
    var data = Array.apply(null, {length:20}).map(Number.call, Number);
    alert(data);
    this.state = {dataSource:ds.cloneWithRows(data)};
  }

  render() {
    return (

      <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={
        (rowData) => {
          return (
            <View style={styles.item}>
              <Text>{rowData}</Text>
            </View>
          )
        }
      }/>
    );
  }
}

export default class TestPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TestCmp/>
      </View>
    )
  }
}

其他10件物品怎么了？我已经尝试使用检查器并更改容器的高度，但没有任何工作。

Answer 1

ReactNative ListView组件使用initialListSize属性计算在初始组件装载时要呈现的行数。默认情况下，initialListSize设置为10.

供参考，请参阅ReactNative ListView源代码

中的以下函数

  var DEFAULT_INITIAL_ROWS = 10;      
  getDefaultProps: function() {
    return {
      initialListSize: DEFAULT_INITIAL_ROWS,
      pageSize: DEFAULT_PAGE_SIZE,
      renderScrollComponent: props => <ScrollView {...props} />,
      scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
      onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
      stickyHeaderIndices: [],
    };
  }

如果你想让ListView在默认情况下渲染所有项目，那么你可以在ListView组件中使用initialListSize属性，如下面的代码

<ListView contentContainerStyle={styles.list}
                initialListSize={20}
                dataSource={this.state.dataSource} renderRow={
        (rowData) => {
          return (
            <View style={styles.item}>
              <Text>{rowData}</Text>
            </View>
          )
        }
      }/>

Answer 2

ListView根据项目高度（对于垂直列表）或项目宽度（对于水平列表）确定可见行。您有垂直列表（horizontal={false}），因此对于ListView，您的布局如下所示：

ListView渲染10个项目，因为它默认为最小渲染次数（initialListSize）。

您应该手动将项目放在行中并在ListView中渲染行或搜索任何网格视图组件。

为什么这个ListView只显示10个项目？

2 个答案: