@andrei_pro

Как разместить блоки в ряд react native?

Всем привет. Не получается разместить блоки в ряд с переносом.

Задача такая: вывести на странице по 4 квадрата (чтобы на всех девайсах было одинаково) в ряд с переносом если не влазит.
5b993f081a378861719981.png
album: {
        marginLeft: 8,
        marginRight: 8,
        paddingVertical: 8,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        flexWrap: 'wrap',
    },
    photo: {
        alignItems: 'center',
        justifyContent: 'center',
        width: Layout.window.width / 5,
        height: Layout.window.width / 5,
        marginVertical: 2,
        marginHorizontal: 2,
        borderColor: '#e5e5e5',
        borderWidth: Platform.OS === 'android' ? 1 : StyleSheet.hairlineWidth,
    },


<View style={styles.album}>
                            {album.photos.map((photo) => (
                                    <TouchableWithoutFeedback
                                        resizeMode={'contain'}
                                        key={p}>
                                            <View style={styles.photo}>
                                                <RegularText style={styles.photoText}>{photo.name}</RegularText>
                                            </View>
                                    </TouchableWithoutFeedback>
                            ))}
                    </View>
  • Вопрос задан
  • 1931 просмотр
Пригласить эксперта
Ответы на вопрос 2
Zatmil
@Zatmil
Fullstack-разработчик
Можно задать для каждого квадрата width: '25%'
Ответ написан
Комментировать
SerzN1
@SerzN1
Challenge me!
`margin` по горизонтали лишний, в итоге лучше все считать в `%` и в сумме 100 в ряд - это вроде очевидно
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы