2016-03-21 17 views
0

ReactネイティブListViewは、最初にコンテンツの半分だけを表示します。そして、適切に更新されません。ReactネイティブListViewはカスタムScrollViewですべてのデータを表示しません

ここに私のコードです:

1)コンストラクタでデータソースを作成します。

const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1.id !== r2.id }); 

2)

<ListView 
    dataSource={this.state.dealsList} 
    renderRow={this._renderDealRow.bind(this)} 
    renderFooter={this.renderLoadMoreButton.bind(this)} 
    renderScrollComponent={this.renderScroll.bind(this)} 
/> 

this.setState({ dealsList: this.state.dataSource.cloneWithRows(response.data), hasNextPage: hnp }); 

3私のコンテンツをロードした後にレンダリングする機能内部

応答配列の長さは20です。しかし、私は、私は、カスタムスクロールビューを使用しているよりも、理由があることがわかっ

私のListView

UPDATEでわずか10行を参照してください。私のスクロールビューは

<ScrollView 
    style={styles.scrollview} 
    refreshControl={ 
      <RefreshControl 
      refreshing={this.state.reloading} 
      onRefresh={() => { 
       this.setState({reloading: true}); 
       this.load(1); 
      }} 
      tintColor={commonStyles.colors.primary} 
      colors={['white']} 
      progressBackgroundColor="#00b7bb" 
    /> 
}/> 
+0

データソースメソッドでは、行とIDを比較していますが、同じIDを持たない人はいますか? –

+0

この関数をtrue/falseに設定することもできます。私は同じ問題を抱えています – Oly

答えて

0

です。理由は私がカスタムScrollViewを使用し、コンポーネントにプロップを含めなかったためです。この問題を解決するには、renderScroll関数を

に変更する必要があります。
return (
    <ScrollView 
     {...props} // this line 
     style={styles.scrollview} 
     refreshControl={ 
      <RefreshControl 
      refreshing={this.state.dealsReloading} 
      onRefresh={() => { 
       this.setState({dealsReloading: true}); 
       this.loadDeals(1); 
      }} 
      tintColor={commonStyles.colors.primary} 
      colors={['white']} 
      progressBackgroundColor="#00b7bb" 
      /> 
    }/> 
); 
関連する問題