Почему этот ListView показывает только 10 элементов?

Question

(Я знаю, что есть сайты для обмена реактивными примерами, но я не смог найти их через google; «отредактировать собственный код общего доступа» просто появляется код для кнопки совместного доступа, то же самое для «примера» - что такое хороший сайт для использования?)

У меня есть listview (спасибо answer, кредит @ colin-ramsay). Я хотел бы сделать некоторые элементы внутри каждого списка и заставить их выравнивать внутри своих контейнеров (флажок и метка в той же строке). Но я не могу зайти так далеко, потому что не могу понять, почему этот массив из 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 визуализации все элементы по умолчанию, то вы можете сделать использование 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 или искать любой элемент сетки.