Why is this ListView showing only 10 items?

Question

(I know that there are sites for sharing reactive examples, but I could not find them through google; "edit my own sharing code" just displays the code for the sharing button, the same for the "example" - what is a good site for this? )

I have a list (thanks to this answer , credit on @ colin-ramsay). I would like to make some elements inside each list and make them align inside their containers (checkbox and label on the same line). But I can’t go this far because I can’t understand why this array of 20 items shows only 10 items.

A warning displays 20 items (0-19) when it fires.

The code:

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 , initialListSize ListView, ,

<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 .