Отображать изображения в FlatList

Question

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

Мой фрагмент кода:

...
renderItem = ({item}) => {
        return (
        <Image source = {{uri: item.photoUrl[0].photoUrl}} style = {{margin: 1,
                                                                    height: Dimensions.get('window').width / 3,
                                                                    width: Dimensions.get('window').width / 3,
                                                                    resizeMode: 'cover'}}
        />
    )
}

render() {
    if(this.props.viewOption === 'grid') {
        return <FlatList
                    data = {this.state.photosKeysArray}
                    keyExtractor={(item, index) => item.id}
                    numColumns = {3}
                    renderItem={this.renderItem}
                />
    } ...

Проблема в том, что FlatList должен вычислять ширину item самостоятельно в соответствии с numColumns, верно? Так что в Image я должен указать только высоту. Поскольку я хочу визуализировать квадратные изображения, я присваиваю высоте значение, равное Dimensions.get('window').width/3, где 3 - это значение numColumns.

После этого FlatList отображает пробелы вместо изображений.

Если я добавлю свойство width к Image (как в моем фрагменте кода) и определу его как высоту (квадратное изображение, помните?), Тогда FlatList отобразит 3 столбца с квадратными изображениями, но они будут отображаться как на моем эскизе ( два полных изображения и последний столбец обрезан):

Как показать три полных столбца?

Answer 1

Проблема была решена с использованием следующих значений width и height изображения:

height: (Dimensions.get('window').width - (30 + 2*this.state.columns)) / this.state.columns,
width: (Dimensions.get('window').width - (30 + 2*this.state.columns)) / this.state.columns,

Где 30 - это двойное (левое и правое) поле основного экрана и 2 - двойное поле изображения.

Answer 2

Хотите легкие квадраты? Хорошо, тогда вы должны знать это свойство, которое реагирует на native, оно называется Aspect Ratio , вы просто устанавливаете ширину или высоту, устанавливаете форматное соотношение 1 в стиле, и у вас есть квадрат.

Это остается тем же

<FlatList
   numColumns={3}
   data={this.state.data}
   renderItem={({ item }) => this.renderItem(item)}
/>

но это проще

renderItem(item) {
    return (
        <TouchableOpacity  
                 style={{flex:1/3, //here you can use flex:1 also
                 aspectRatio:1}}>
                <Image style={{flex: 1}} resizeMode='cover' source={{ uri:  item.photoUrl[0].photoUrl}}></Image>
        </TouchableOpacity>
    )
}

Следует отметить, что если у вас есть дополнительный элемент под всеми строками, и вы используете flex: 1 вместо flex: 1/3, это будет большой, действительно большой квадрат, для этого вы можете использовать методы, описанные здесь

Answer 3

numColumns

Несколько столбцов могут отображаться только при горизонтальном = {false}

<FlatList
   numColumns={3}
   data={this.state.data}
   renderItem={({ item }) => this.renderItem(item)}
/>

renderItem

Элемент настройки (изгиб / ширина / высота) согласно требованию

renderItem(item) {
    return (
        <TouchableOpacity>
            <View style={{
                width: (Constant.SCREEN.width - 32) / 3,
                height: (Constant.SCREEN.width - 32) / 3,
                justifyContent: 'center'
            }}>
                <Image style={{ width: '70%', height: '70%', alignSelf: 'center' }} resizeMode='contain' source={{ uri: item.image }}></Image>
                <SPText
                    style={{ flex: 1.0, textAlign: 'center', marginLeft: 4, marginRight: 4 }}
                    text={item.text}
                    fontSize={10}
                    textColor='white' />
            </View>
        </TouchableOpacity>
    )
}