React-Native перерисовывает плоский список - PullRequest
Новая
       6

React-Native перерисовывает плоский список

0 голосов
/ 23 мая 2018

У меня проблемы с сохранением данных в моем Flatlist после возвращения с другой страницы.Мой сценарий выглядит следующим образом:

  1. Пользователь переходит на домашнюю страницу и прокручивает 20 элементов
  2. Пользователь нажимает на страницу изменения своей вкладки профиля, используя response-native-router-flux
  3. Пользователь щелкает домашнюю вкладку, возвращая их обратно в список, однако список перерисовывается и начинается сверху.

Как я могу остановить этот повторный рендеринг и снова извлечь те же данные? 

componentDidMount() {
    this.makeRemoteRequest();
}

makeRemoteReuest получает мои данные из firebase партиями по 5 и устанавливает данные: [] 

data: [...this.state.data, ...results]

Я пытался использовать приведенное ниже, но не уверен, что это правильно, когда я перемещаюсьпрочь и обратно данные рендеринга.Я хочу сохранить данные, чтобы страница была точно такой же, как и на момент ее выхода. 

shouldComponentUpdate(nextProps, nextState) {
    if (JSON.stringify(this.state.data) !== JSON.stringify(nextState.data)) {
      return true;
    }
    return false;
}

Мой плоский список: 

<View>
        <FlatList
          scrollsToTop={false}
          ref={(ref) => { this.flatListRef = ref; }}
          showsHorizontalScrollIndicator={false}
          onScroll={this.handleScroll}
          data={this.state.data}
          keyExtractor={item => item.key}
          ListFooterComponent={this.renderFooter()}
          onRefresh={this.handleRefresh}
          refreshing={this.state.newRefresh}
          onEndReached={this.handleEndRefresh}
          onEndReachedThreshold={0.05}
          getItemLayout={this.getItemLayout}
          renderItem={this.renderItem}
        />
        {this.state.refreshAvailable ? this.renderRefreshButton() : null}
      </View>

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 24 мая 2018

Кодированный длинный назад для тупого проекта, может быть, это может помочь вам

Представление: используется onLayout Prop для получения оси Y 

   <ScrollView
   ref={(ref) => this.scrollTo = ref}
   contentContainerStyle={{margin:5,}}
   >
   <Card onLayout={(event) => this._findHeight(event.nativeEvent.layout, 'personal')}>
    <Personal review={true}/>
   </Card>
   </ScrollView>

Функция: сохранена ось Y;здесь я использовал realb db 

    _findHeight = (e, name) => {
      const {x, y, width, height} = e;
      this.realm.write(() => {
         this.realm.create('yLocation',{names:name,yaxis:y}) : 
      });
    }

метод AutoScroll : здесь я использовал метод scrollTo из ScrollView, вы можете использовать любой метод, используя их ref 

_scrollTo = (y) => {
  this.scrollTo.scrollTo({x:0,y:y,animated:true});
}

Примечание: вызов метода _scrollTo в componentDidMount

...