Реагировать на нативные элементы FlatList не рендеринг - PullRequest
Новая
       47

Реагировать на нативные элементы FlatList не рендеринг

0 голосов
/ 12 октября 2018

Я тестирую FlatList, вложенный в навигатор, и пытаюсь узнать, как он работает.Приведенный ниже код работает нормально: 

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
    horizontal={true}
/>

Но это не так: 

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <TextComp data={item}/>}
    horizontal={true}
/>

TextComp - это просто компонент, который отображает item.key и работает так, как задумано, когда тестируется отдельно.Код: 

<View> 
    <Text>{this.props.data.key}</Text> 
</View>

Я также пробовал рисовать границы вокруг обоих компонентов, и кажется, что FlatList определенно выполняет рендеринг, но элементы - нет.

Я тестирую на своем Androiddevice.

Обновление: я добавил оператор console.log (this.props) в компонент TextComp, и он правильно отображает реквизиты, поэтому правильные данные передаются из FlatList в TextComp, но TextComp простоне получать

1 Ответ

0 голосов
/ 13 октября 2018

Марсель Кальверам получил решение здесь после того, как я сравнил его код с моим.Оказывается, высота и ширина необходимы для правильного отображения элемента в FlatList.Я объяснил это тем, что размеры элемента необходимы для правильного определения размера элемента в FlatList.Аналогично, размеры элемента не могут быть процентами, поскольку его родительский элемент представляет собой FlatList, который сам имеет различные размеры.Поэтому решением моей проблемы было добавить атрибуты стиля ширины и высоты к компоненту элемента.Для автоматического изменения размера я использовал встроенные React Native Dimensions.

...