爲什麼這個ListView只顯示10個項目？

（我知道有些網站可以共享反應的例子，但我一直沒能通過谷歌找到它們;「反應原生共享代碼」只是提供了分享按鈕的代碼，與「示例」相同 - 什麼是好的網站使用這個？）爲什麼這個ListView只顯示10個項目？

我有一個列表視圖（感謝這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個項目？我試過用檢查器和改變容器的高度，沒有任何工作。

來源

2016-11-20 jcollum

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> 
     ) 
     } 
     }/>

來源

2016-11-20 18:04:32 Jickson

那麼這是完全愚蠢的。那個容器是巨大的 - 爲什麼它會決定只在頁面完全空時隨機顯示一些項目呢？使用具有'View'元素的'Array.map'會更好嗎？似乎更簡單，沒有有趣的規則。 – jcollum

是的。如果元素數量不多，沒有理由使用ListView。 – Jickson

使用ListView的主要好處是渲染優化，因此將'initialListSize'設置爲項目計數使其絕對無用。對於複雜的列表項目，甚至10個初始渲染可能足以使ui無響應。 – farwayer

基於項目高度（垂直列表）或ITE的ListView確定可見行寬度（水平列表）。你有垂直列表（horizontal={false}），所以對你的ListView佈局是這樣的：

和ListView呈現10個項目，因爲它是最小的默認（initialListSize）渲染計數。

您應該手動將項目放入行中並在ListView中呈現行或搜索任何網格視圖組件。

來源

2016-11-21 09:04:37 farwayer

爲什麼這個ListView只顯示10個項目？

回答

相關問題