Реактивный плоский список определяет, когда канал загружается и отображается

Question

Реактивный плоский список определяет, когда канал загружается и отображается

1

Я FlatList ленту новостей с поддержкой FlatList с FlatList и я бы хотел обнаружить, что загружен фид, и первые несколько обработанных элементов. Идея заключается в том, что страница всплеска будет отображаться до тех пор, пока рендеринг не будет отображаться (https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in -react-native.html), и в этот момент брызговик будет анимировать ленту новостей. Вопрос в том, где я обнаруживаю событие isRendered. Мой FlatList имеет два реквизита, которые могут представлять интерес:

class NewsFeed extends Component {

    state = { data: [] }

    loadData = async () => { ... }

     renderItem = ({ item }) => { ... }

    render () { 
       return <FlatList renderItem = {this.renderItem} data={this.state.data} />
    }
}

Я попытался перевернуть isRendered boolean как последнюю строку в loadData, но после перехода с экрана приземления он по-прежнему занимает часть секунды (иногда) перед визуализацией изображений. Поэтому я перевернул флаг isRendered boolean в функции renderItem, и мы никогда не продвигаемся за всплеск вообще, то есть функция никогда не запускается.

chibro2 25 июль 2018, в 05:58

Источник

0

Закройте заставку, когда API-интерфейс будет решен. При получении успешного ответа от API закройте заставку
Paras Watts 25 июль 2018, в 05:01

Теги:

javascript

react-native

1 ответ

Ещё вопросы

Закройте заставку, когда API-интерфейс будет решен. При получении успешного ответа от API закройте заставку

sshaul · Accepted Answer · 2018-07-25T01-36-00.000Z

Возможно, вы захотите проверить значение isRendered в функции рендеринга. Если isRendered все еще ложно, вы показываете заставку. Тогда, если логическое значение true, вы можете начать анимацию с этого компонента и сразу же отобразить список, поскольку данные уже загружены. Чтобы сделать эту работу, вызовите setState, чтобы перевернуть isRendered boolean в loadData, как вы делали это раньше, поэтому функция рендеринга вызывается снова после загрузки данных. (И вы можете вызвать функцию loadData в componentDidMount, поскольку это будет вызвано сразу же после установки компонента).

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