2016-09-27 2 views
0

React Native ListView не будет повторно отображать свои строки после вызова this.setState, если список имеет большой источник данных, т.е. все работает правильно, если у меня есть несколько строк (от 1 до 9), но если я добавлю больше данных, то повторного рендеринга не произойдет.React Native 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 DataSource является относительно небольшим, то вызова this.setState({isShowing: true}); будет инициировать повторную визуализацию и каждый из рядов теперь будет содержать кнопки, но когда я добавить больше данных, то изменение состояния ничего не делает.


EDIT: Мое решение частично работает (то есть для малого размера данных) - Я хотел бы знать, почему и как функциональные изменения ListView, если при увеличении размера данных. Предлагаемые ответы не отвечают именно на этот вопрос. Мой код перестает работать, если количество строк достигает 10. Если оно ниже, все работает отлично.

+0

Возможный дубликат [React Native - Force ListView Re-визуализации, когда данные не изменились] (http://stackoverflow.com/questions/38000667/react-native-force-listview-re-render-when-data-has-not-changed) – DTing

ответ

0

Найти способ решить с этим:

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: [], 
    }; 
    } 
Смежные вопросы