#javascript #reactjs #react-native #mobile #react-native-flatlist
Вопрос:
У меня есть FlatList
компонент, состоящий из 3 разделов:
<View style={{ flex: 1 }}>
<FlatList
ListHeaderComponent={Comp1}
ListFooterComponent={<Comp2 style={{ flexGrow: 1, justifyContent: 'flex-end' }}/>}
renderItem={Comp3}
contentContainerStyle={{ flexGrow: 1 }}
/>
</View>
По умолчанию, ListFooterComponent
будет отображаться сразу после ListHeaderComponent
, если data.length
равно 0.
Мне нужно все время визуализировать его внизу.
Один обходной путь, который я нашел до сих пор, — это предоставить пустое представление для ListEmptyComponent
. В этом случае все выглядит нормально, пока я не добавлю хотя бы один элемент — тогда он снова прилипнет к верху.
Можно ли прикрепить ListFooterComponent
к нижней части по умолчанию?
Синий цвет-это FlatList
, красный цвет — ListFooterComponent
Комментарии:
1. Другим обходным решением является отображение вашего плоского списка как
flex:1
, но не непосредственно на нем. Вы можете обернуть свой плоский список в представление,flex:1
а затем передатьcontentContainerStyle={{ flexGrow: 1 }}
его в качестве опоры в плоский список. Соответствует ли это вашему запросу?2. кажется на самом деле, как сейчас 🙂
FlatList
размер кажется идеальным, единственное, что не так — тоListFooterComponent
. Я обновлю код для большей ясности3. Хорошо, я просто понял вашу проблему, извините, и я подумаю над решением
Ответ №1:
Если это должно быть в нижней части экрана в любое время, вы можете обернуть отдельные части в виде прокрутки
render() {
return (
<ScrollView style={{flex: 1}}>
<Comp1/>
<FlatList
style={{flex: 1}}
renderItem={Comp3}
/>
<Comp2/>
</ScrollView>
);
}
Комментарии:
1. да, это вариант, но в этом случае он не будет прокручиваться вместе с остальной частью представления, когда его размер содержимого превышает размер. Я хочу, чтобы это все еще происходило. Имеет ли это смысл?
2. Действительно, это верно, я посмотрю, смогу ли я придумать решение
3. Я нашел решение. Я завернул
Comp1
,FlatList
иComp2
внутриscrollView
. если у вас есть идея — просто перепишите свой ответ, и я приму его 🙂4. Ах да, хорошая идея! Но я не хочу брать на себя ответственность за ответ, который я не придумал сам 😉
5. @Milore Это работает, я использую его все время. Реквизит с возможностью прокрутки плоского списка может быть установлен в значение false, когда он находится внутри представления прокрутки
Ответ №2:
Прежде чем пересматривать свой вид, хорошей идеей будет установить высоту в соответствии с размером экрана. Что-то вроде:
const {height} = Dimensions.get ('window');
Вид будет выглядеть так:
<View style = {{flex: 1, height: height}}>
Добавьте положение: «относительно» к виду:
<View style = {{flex: 1, height: height, position: 'relative'}}>
Затем добавьте стиль ListFooterComponentStyle в плоский список:
ListFooterComponentStyle = {{
backgroundColor: '# ccc',
position: 'absolute,
width: '100%',
bottom: 0
}}
Покажите полный пример функционального компонента:
const {height} = Dimensions.get('window'); //capture the screen size
return (
<SafeAreaView style={{flex:1,height:height,backgroundColor:'#f5f5f5', position:'relative'}}>
<FlatList
data = {YOUR_DATA}
renderItem = {renderItem}
keyExtractor = {item => item.idItem}
numColumns = {2} // Divide list items into 2 columns (optional)
onEndReached = {LOAD_MORE_DATA}
onEndReachedThreshold = {0.1} //0.1 = 10%
ListFooterComponent = {YOUR_COMPONENT_FOOTER}
ListFooterComponentStyle={{
backgroundColor:'#ccc',
position:'absolute',
width:'100%',
bottom:0
}}
/>
</SafeAreaView>
)
Ответ №3:
добавьте flexGrow: 1 в contentContainerStyle плоского списка добавьте flexGrow: 1 в ListFooterComponentStyle плоского списка добавьте flex: 1 и justifyContent: «гибкий конец» для просмотра контейнера,используемого в ListFooterComponent
<FlatList
contentContainerStyle = {{flexGrow: 1}}
listFooterComponentStyle = {{flexGrow: 1}}
listFooterComponent = {()=>(
<View style={{
flex:1,
justifyContent: "flex-end"
}}>
...Component you want at bottom
</View>
)}
/>