React-Native: Как динамически установить высоту FlatList и сделать экран заполнения FlatList? - PullRequest
Новая
       33

React-Native: Как динамически установить высоту FlatList и сделать экран заполнения FlatList?

2 голосов
/ 24 июня 2019

Я изучаю RN и у меня есть проблемы в моем проекте.Я надеюсь сделать так: GIF в моей части

Это мой код: 

<View style={{ height: Dimensions.get('window').height }}>
    <StatusBar translucent={true} backgroundColor='#00000000' />

    <View>
        ...... something here......
    </View>

    <View style={{ flex: 1}}>
          <FlatList
              data={jobList}
              onEndReached={jobListOnEndReached}
              onEndReachedThreshold={0.1}
              renderItem={renderJobList}
              height={pxToDp(100)}
              onScrollBeginDrag={() => setScroll(true)}
          />
    </View>
</View?

и теперь это выглядит как it.Я хотел бы, чтобы когда я открывал FlatList, я мог заставить FlatList заполнять экран как this .Я пытался использовать «анимированный» реквизит, но не знаю, как заставить его работать.

1 Ответ

0 голосов
/ 24 июня 2019

Вы можете добавить в свой стиль Flatlist height и width и должны выполнить эту работу.Ознакомьтесь с демонстрационной закуской: @ abranhe / stackoverflow-56739086

image

import React from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';

const data = [
  { number: 1 },
  { number: 2 },
  { number: 3 },
  { number: 4 },
  { number: 5 },
];

export default () => {
  return (
    <View style={styles.container}>
      <Text>Something Here</Text>
      <View style={styles.content}>
        <FlatList
          data={data}
          renderItem={({ item }) => (
            <Text style={styles.item}>item{item.number}</Text>
          )}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    width: '100%',
    height: '80%',
  },
  item: {
    margin: 10,
  },
});

Обновление

Обновлениеиз-за комментария автора вопроса!Если вы хотите просмотреть больше элементов и иметь возможность прокрутки, просто добавьте больше элементов к данным.

image

...