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

#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>
    )}
/>