FlatList скрывается при прокрутке - PullRequest
Новая
       24

FlatList скрывается при прокрутке

0 голосов
/ 09 июля 2020

Я использую FlatList, который может содержать только один элемент или несколько элементов. Однако, когда у меня есть только один элемент, я бы предпочел, чтобы его как-то исправили. Сейчас, если я держу его и прокручиваю вниз, он начинает скрываться. Как я могу это исправить?

Если я использую scrollEnabled={false}, это становится неудобным в случаях, когда у меня есть несколько элементов из FlatList, потому что тогда я не могу прокрутить экран и увидеть оставшиеся элементы. 

        <View style={styles.listHolder}>
          {data && 
          <FlatList
            data={data.me.pendingUserRelationsRequestsSent.nodes}
            horizontal={false}
            renderItem={({ item }) => (
              <UserItem
                user={item}
                originatorId={data.me.id}
              />
            )}
            keyExtractor={(item) => item.id.toString()}
            ListEmptyComponent={NoRequestsContainer}
          />
            }
          {error && <ErrorContainer />}
        </View>

  listHolder: {
    width: '100%',
  },

UserItem.tsx 

 return (
    <View style={styles.item}>
        <Thumbnail
          style={styles.thumbnail}
          source={{
            uri:
              'https://cdn4.iconfinder.com/afro_woman_female_person-512.png',
          }}></Thumbnail>
      <View style={styles.nameContainer}>
        <Text style={styles.userName}>{userName}</Text>
      </View>
      <View style={styles.buttonContainer}>
        <Button
          rounded
          style={styles.cancelButton}
          onPress={() => onCancelRequest(originatorId, user.id)}>
          <Icon name="close" size={moderateScale(20)} color="black" />
        </Button>
      </View>
    </View>
  );
};

export const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    borderRadius: moderateScale(20),
    padding: moderateScale(20),
    marginVertical: moderateScale(8),
    marginHorizontal: 16,
    height: moderateScale(110),
    //width: moderateScale(360),
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  userName: {
    paddingTop: 20,
  },
  buttonContainer: {
    paddingTop: 12,
    marginRight: 2,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  cancelButton: {
    backgroundColor: '#e8403a',
    width: moderateScale(45),
    justifyContent: 'center',
  },
  thumbnail: {
    height: 85,
    width: 85,
    marginLeft: 2,
    paddingRight: 0,
    position: 'relative',
  },
  nameContainer: {
    flexDirection: 'row',
    paddingRight: 30,
  },
});

введите описание изображения здесь

Поскольку я перетаскиваю его вниз, много места оказывается и на его вершине. Этого тоже не должно быть.

1 Ответ

0 голосов
/ 09 июля 2020

Вы можете использовать условный оператор в свойстве scrollEnabled, который проверяет длину вашего массива данных. Например, если вы не хотите, чтобы он прокручивался, когда отображается только один scrollEnabled={data.me.pendingUserRelationsRequestsSent.nodes.length > 1} /.

Если ваши данные асинхронны, я бы обработал это в состоянии 

const [isScrollEnabled, setIsScrollEnabled] = false;

...

const fetchData = async () => {
   const data = await someDataRequest();
   if (data.length > 1) {
     setIsScrollEnabled(true)
   }
}

.... 

return (
    <View style={styles.listHolder}>
      {data && 
      <FlatList
        data={data.me.pendingUserRelationsRequestsSent.nodes}
        horizontal={false}
        scrollEnabled={isScrollEnabled}
        renderItem={({ item }) => (
          <UserItem
            user={item}
            originatorId={data.me.id}
          />
        )}
        keyExtractor={(item) => item.id.toString()}
        ListEmptyComponent={NoRequestsContainer}
      />
        }
      {error && <ErrorContainer />}
    </View>

)

...