React Native - FlatList не отображается

(Примечание: я использую Expo для этого приложения)

Я пытаюсь отобразить FlatList, отображающий список принтеров. Вот код:

<FlatList
  data={printers}
  keyExtractor={printer => printer.id}
  renderItem={({ item }) => {
    return (
      <Printer
        printerTitle={item.name}
        selected={item.selected}
        last={item === last(printers)}
      />
    );
  }}
/>

Вот код для компонента <Printer />:

const Printer = props => {
  const { last, printerTitle, selected } = props;
  return (
    <View style={[styles.container, last ? styles.lastContainer : null]}>
      <View style={styles.innerContainer}>
        <View style={styles.leftContainter}>
          {selected ? (
            <Image source={selected ? Images.checkedCircle : null} />
          ) : null}
        </View>
        <View style={styles.printerDetails}>
          <Text style={styles.printerTitle}>{printerTitle}</Text>
        </View>
      </View>
    </View>
  );
};

...

export default Printer;

Кажется, мне не удается отобразить компонент <Printer />. Я пробовал включить аналогичный настраиваемый компонент (который работал в FlatList в другой части приложения) в опору renderItem, но он тоже не работает.

Однако, когда я заменяю компонент <Printer /> на компонент <Text>{item.name}</Text>, имя принтера отображается так, как я ожидал.

Кто-нибудь сталкивался с этой проблемой раньше или у кого-нибудь есть решение?


react-native expo flatlist custom-component
person makozlo    schedule 01.11.2017    source источник
comment
Как выглядит компонент "Принтер"? Как вы его экспортируете? Как вы это импортируете? Вы пытались поместить визуализированный компонент в Printer непосредственно в renderItem? У вас есть ошибки?   -  person bennygenel    schedule 01.11.2017

Ответы (6)


arrow_upward
16
arrow_downward

В моем случае, когда я визуализирую настраиваемый компонент для каждого элемента в списке, он не был визуализирован, потому что я случайно {} окружал возвращаемую часть опоры renderItem вместо ().

Меняется:

<FlatList
  data={array}
  renderItem={({item, index}) => { <CustomItemComponent /> }}
/>

к этому:

<FlatList
  data={array}
  renderItem={({item, index}) => ( <CustomItemComponent /> )}
/>

Решил мои проблемы.

person Jim    schedule 27.12.2019
comment
Ага! Это идеальное решение - person deluxan; 20.02.2020
comment
Один из тех, кто часами пытается понять, что происходит, и все, что вам нужно, - это еще одна пара глаз ... - person linuxer; 29.07.2020

arrow_upward
6
arrow_downward

Я подозреваю, что есть две проблемы: первая заключается в том, что ваш FlatList не заполняет экран (а именно в его родительском представлении), а вторая - в том, что размер вашего компонента принтера не соответствует размеру.

Для первой проблемы добавьте стиль с { flex: 1 } в свой FlatList. Таким образом, он заполнит свой родительский вид.

Что касается второй проблемы, попробуйте добавить { borderColor: 'red', borderWidth: 1 } к компонентам вашего принтера, чтобы вам было легче увидеть, где они отображаются. Если кажется, что у них нет ширины, убедитесь, что вы не переопределили alignSelf в корневом представлении компонента «Принтер». Если кажется, что у них нет высоты, временно добавьте height: 100, чтобы вы могли видеть, как выглядит содержимое компонентов принтера.

В компоненте «Принтер» не забудьте указать ширину и высоту вашего изображения в компоненте «Изображение», например { width: 40, height: 30 }, или любые другие размеры вашего изображения в логических пикселях.

person ide    schedule 01.11.2017

arrow_upward
3
arrow_downward

У меня такая же проблема. Решаем проблему с добавлением ширины в FlatList

render() {
    const dimensions = Dimensions.get('window');
    const screenWidth = dimensions.width;
    return(
      <FlatList
         style={{
             flex: 1,
             width: screenWidth,
         }}
       ... some code here
      />
    )
}
person Павел Зырянов    schedule 14.11.2018
comment
Это было для меня. Добавлена ​​ширина: 100% в стиле, и это сработало. - person Sander Koldenhof; 03.10.2019
comment
очень странно, но работает нормально - person Jeffrey; 25.12.2020

arrow_upward
1
arrow_downward

Вы не можете использовать keyExtractor таким образом, сделайте эту функцию, как показано ниже. Это может решить вашу проблему.

_keyExtractor = (item, index) => index;

Если вы обновите свой вопрос, указав код компонента принтера, мы сможем вам лучше помочь.

person Vahid Boreiri    schedule 01.11.2017

arrow_upward
0
arrow_downward

В моем случае я случайно сделал его парным тегом: <FlatList></FlatList>, который по какой-то причине прерывает рендеринг элементов списка.

person Eskel    schedule 05.06.2019

arrow_upward
0
arrow_downward

в моем случае Контейнер не имел ширины 100%:

const Container = styled.View`
  border: 1px solid #ececec;
  margin-top: 43px;
  padding-top: 36px
  padding-bottom: 112px;
  width: 100%;
`;

const StyledFlatList = styled(
  FlatList as new () => FlatList<SimilarRewards_viewer['merchants']['edges'][0]>
)`
  width: 100%;
  height: 150px;
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
`;
person gpbaculio    schedule 25.03.2021