web-dev-qa-db-fra.com

React Appartemiste natal non défilant à la fin

J'ai (ce que je pensais être) un simple FlatList qui rend une liste de Cards (code ci-dessous)

Problème: La liste rend la liste, mais ne faites pas défiler pour afficher complètement le dernier élément de la liste, OR au contenu ci-dessous FlatList

Qu'est-ce que j'ai essayé: essentiellement tout dans les questions connexes SO:

  • Supprimer tout le style
  • Envelopper le FlatList dans un View ou un ScrollView ou les deux
  • Ajout de style={{flex: 1}} Au FlatList ou wrappers (cette cause ** tout * contenu * de disparaître)

Des idées?

<FlatList
        data={props.filteredProducts}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => props.addItemToCart(item)}>
            <Card
              featuredTitle={item.key}
              image={require('../assets/icon.png')}
            />
          </TouchableOpacity>
        )}
        keyExtractor={item => item.key}
        ListHeaderComponent={
          <SearchBar />
        }
      />
...
<Other Stuff>
react-nativereact-native-flatlistreact-native-elements
9
rubie

Je ne sais pas si votre scénario est exactement le même que celui que j'ai rencontré sur un projet il y a quelques mois, mais j'ai remarqué que je devais ajouter un margin/padding (dépend de ce que vous préférez) de soulever le fond du conteneur défilé. C'était généralement parce qu'un conteneur parent semblait interférer avec le style de l'élément défilé.

Avez-vous essayé d'ajouter flexGrow: 1 à votre style à la place de flex?

2
Nnanyielugo

Ajouter style={{flex: 1}} Pour chaque élément de vue qui est un parent pour la flambée.

3
Romanov Eugene

Mon cas est un peu différent, en ce que j'ai utilisé FlatList intérieure feuille de fond fournie par reanimated-bottom-sheet paquet. Mais le problème était le même: le défilement n'a pas montré le dernier article correctement.

La façon dont je l'ai fait était j'ai calculé et défini la hauteur de la vue qui incluait le FlatList. Pour que cela aient l'air mieux quand il y a du bas inset, j'ai donné plus de marge inférieure au dernier élément du FlatList en faisant comme ceci:

<FlatList
    data={results}
    keyExtractor={(item) => item.name}
    scrollEnabled={bottomSheetIndex == 1 ? true : false}
    renderItem={({ item }) =>
        <LocationInfo
            bottom={results[results.length - 1].id == item.id ? insets.bottom : 0}
            result={item}
            wait={waitState[item.id]}
            bsIndex={bottomSheetIndex}
        />
    }
/>

const LocationInfo = ({ bottom, result, wait, bsIndex }) => {

    return (
        <View style={[styles.container, { paddingBottom: bottom }]}>
            ...

pour embarquer, voir react-native-safe-area-context.

0
Brian Hong

ajouter Flex: 1 à mon article de rendu travaillé pour moi

 <FlatList
      data={data}
      renderItem={({ item }) => (
        <ListItem
          onPress={() => console.log('ok')}
          bottomDivider
          rightTitle={
            <Divider style={{ marginBottom: 4, backgroundColor: item.status, width: '50%', height: '11%', borderRadius: 10 }} />
          }
          titleProps={{ numberOfLines: 1 }}

          rightSubtitle={item.date}
          rightTitleStyle={{ fontFamily: 'poppins' }}
          rightSubtitleStyle={{ fontFamily: 'poppins' }}
          titleStyle={{ fontFamily: 'poppins' }}
          subtitleStyle={{ fontFamily: 'poppins' }}
          title={item.device}
          subtitle={item.type}
          leftAvatar={{ source: item.icon, rounded: false }}
          **style={{ flex: 1 }}**
        />
      )}
      keyExtractor={item => item._id}
      ListHeaderComponent={renderHeader}
      ListFooterComponent={renderFooter}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.2}

    />
0
Nipek

Supprimer Flex: 1 de la flatliste et ne laissez que la vue parent.

0
Lima Neto