#react-native #react-native-android #react-native-flatlist #react-native-scrollview
Вопрос:
Я знаю, что такого рода вопросы уже возникали в stackoverflow раньше. Но я не могу найти правильное решение этой проблемы.
Есть ли какое-либо решение для размещения <FlatList/>
внутри <ScrollView></ScrollView>
in react-native?
вот мой код…
<ScrollView
onScroll={(e) => {
onScroll(e);
}}
stickyHeaderIndices={[1]}
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
style={{ width: '100%' }}
>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
</ScrollView>
Ошибка выдает следующее:
ОШИБКА Виртуализированные списки никогда не должны быть вложены в простые представления прокрутки с одинаковой ориентацией, потому что это может нарушить работу окон и другие функции — вместо этого используйте другой контейнер с поддержкой виртуализированных списков.
Комментарии:
1. это происходит потому, что внутри плоского списка также есть представление прокрутки, что вы можете сделать, это обернуть свой плоский список в представление, чтобы отделить прокрутку
Ответ №1:
это происходит потому, что внутри плоского списка также есть представление прокрутки, что вы можете сделать, это обернуть свой плоский список в представление, чтобы отделить прокрутку
Внутренняя оболочка-это всего лишь другой взгляд
вы можете завернуть свой плоский список вот так:
<ScrollView
onScroll={(e) => {
onScroll(e);
}}
stickyHeaderIndices={[1]}
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
style={{ width: '100%' }}
>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<InnerWrapper>
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
</InnewWrapper>
)}
</View>
</ScrollView>
Комментарии:
1. это не помогает
2. вы завернули два свитка в разные виды?
Ответ №2:
Поскольку у вас нет другого элемента, не используйте ScrollView. Используйте этот код, так как flatlist сам будет прокручивать свои элементы.
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
style={{flex:1}}
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>
Ответ №3:
Я нашел решение для этого. Я поместил свои <ScrollView></ScrollView>
коды компонентов внутрь <FlatList>
ListHeaderComponent
реквизита.
Вот как это выглядит. Я почти уверен, что это должно сработать для каждого
Я нашел это решение отсюда. вы можете сослаться на него и можете понять его очень легко. Как исправить предупреждение «Виртуализированные списки никогда не должны быть вложены в обычные просмотры прокрутки»
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
{isLoading ? (
<DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
) : (
<FlatList
data={data}
ListHeaderComponent={ //here I write ListHeaderComponent and put all code lines of `<ScrollView></ScrollView>` in here
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Image
source={require('../assets/Interview.png')}
width="100%"
height="0"
style={styles.logo2}
/>
</View>
}
keyExtractor={(item, index) => String(index)}
renderItem={({ item }) => (
<View
style={{
flex: 0,
padding: 5,
}}>
<Card style={styles.card}>
<CardItem header style={styles.cardText}>
<Title style={styles.textSign}>{item.question}</Title>
</CardItem>
<CardItem style={styles.cardText1}>
<Body>
<Paragraph>{item.answer}</Paragraph>
</Body>
</CardItem>
</Card>
</View>
)}
/>
)}
</View>