このListViewには10個のアイテムしか表示されないのはなぜですか？

Question

（私は反応的な例を共有するためのサイトがあるが、私はGoogleを介してそれらを見つけることができなかった; "ネイティブシェアコードに反応する"は単に "例"と同じ - 共有ボタンのコードを思い付く。これには良いサイトがありますか？）

私はリストビューを持っています（これは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リストビューコンポーネントはinitialListSizeプロパティを使用してマウントする最初のコンポーネント上にレンダリングする行数を計算します。デフォルトでは、initialListSizeは

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: [], 
    }; 
    } 

は、リストビューは、あなたが作ることができ、デフォルトですべての項目をレンダリングしたい場合は、ReactNative ListViewソースコードから以下の機能を参照してください、参考のために10

に設定されていますリストビューコンポーネントでinitialListSizeプロパティを使用するリストビューは、アイテム（垂直リストの場合）高さまたはITEに基づいて表示される行を決定するコード

Answer 2

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

以下のようm幅（水平リスト用）。あなたは垂直リスト（horizontal={false}）を持っているので、リストビューのためにあなたのレイアウトは次のようになります。

をそして、デフォルト（initialListSize）で、カウントをレンダリング最小限であるため、リストビューには10個のアイテムをレンダリングします。

アイテムを手動で行に配置し、リストビューで行をレンダリングするか、グリッドビューコンポーネントを検索する必要があります。