2016-09-27 8 views
0

ReactネイティブListViewは、リストに大量のデータソースがある場合、つまり、少数の行(1〜9)がある場合はすべて正常に動作するため、this.setStateを呼び出した後にその行を再描画しません。データを追加すると、再レンダリングは行われません。ReactネイティブListViewは大きなデータに対して再レンダリングしません

このトピックについての記事は類似していますが、この問題に完全に対応しているものは見つかりませんでした。ここで

は、いくつかの単純化されたサンプルコードです:

render() { 
    return (
     <View style={Styles.listContainer}> 
      <ListView 
       dataSource={this.state.triggerDataSource} 
       enableEmptySections={true} 
       renderRow={(data) => this._renderListRow(data)} 
       renderHeader={() => this._renderListHeader()}/> 
     </View> 
    ); 
} 

... 

_renderListRow(data) { 
    return (
     <View style={Styles.listRow}> 
      {this._renderX(data)} 
      <View style={Styles.listItem}> 
       <Text style={Styles.listLabel}>{data.symbol}</Text> 
      </View> 
     </View> 
    ); 
} 

... 

_renderX(data) { 
    if (this.state.isShowing) { 
     return (
      <Button> 
       Some button 
      </Button> 
     ); 
    } else { 
     return null; 
    } 
} 

ListViewのデータソースが比較的小さい場合には、this.setState({isShowing: true});を呼び出すと、再レンダリングトリガすると行のそれぞれが今ボタンが含まれますが、私はより多くを追加するときデータの場合、状態の変更は何もしません。


EDIT:私のソリューションは、部分的に(すなわち、小さなデータサイズのために)働いている - 私はなぜ、どのようにListViewコントロールの機能の変更データサイズが大きくなるかどうかを知りたいと思います。提案された回答はこの質問に正確に答えません。私のコードは、行数が10に達すると動作を停止します。

+0

可能重複[ネイティブリアクト - フォースリストビューデータが変更されていない場合に再レンダリング]、ReactNativeリストビューソースコードから以下の機能を参照、参考として10

に設定されています(http://stackoverflow.com/questions/38000667/react-native-force-listview-re-render-when-data-has-not-changed) – DTing

答えて

0

これでそれを解決する方法を見つける:

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: [], 
    }; 
    } 
関連する問題