#react-native #react-native-flatlist
#react-native #react-native-плоский список
Вопрос:
У меня есть Stack.Navigator, когда я перехожу на страницу, содержащую мой плоский список, который отображает 4×6 элементов одновременно, все остальные компоненты будут отображаться, а плоский список будет невидимым / не отображается. Затем приложение блокируется, а затем после этого плоский список отображает все элементы, и макет перемещается, что нежелательно. Является ли это ожидаемым поведением и что я могу с этим поделать? Я бы предпочел, чтобы все приложение зависало / заикалось, пока вся первая страница не будет готова к показу сразу, вместо того, чтобы отображать все, кроме плоского списка, а затем перемещать пользовательский интерфейс.
Насколько я вижу, компонент FlatList очень спорный.
<View>
<FlatList
numColumns={4}
columnWrapperStyle={styles.colWrap}
keyExtractor={(theitem) => theitem.id}
renderItem={renderIndividualSound(onSoundButtonPress)}
data={soundPage}
key="soundspage"
/>
</View>
Комментарии:
1. создайте snack.expo.io или опубликуйте все стили, включенные в ваш код
2. Я сделаю это, когда у меня будет секунда, но стили — это очень простые стили flexbox, renderIndividualSound просто возвращает <Button>, который использует onSoundButtonPress в своем реквизите onPress.
3. После дальнейшей проверки я использовал useState(), который инициализировался с пустым массивом, а затем использовал useEffect(, []) для обновления состояния один раз при инициализации, что означает, что был передан пустой список. Не знаю, как я не обнаружил это в отладчике.
Ответ №1:
После дальнейшей проверки я использовал перехват useState(), который инициализировался с пустым массивом, а затем использовал useEffect(()=>{}, []) подключитесь, чтобы обновить состояние один раз при инициализации, что означает, что для самого первого рендеринга был передан пустой список.