React Native Mapped Image grid
Я надеюсь получить помощь в создании сетки изображений в React Native.
Я пытаюсь создать сетку изображений с сопоставленными данными из массива. Часть отображения работает нормально, но изображения не размещаются так, как я хочу. Это то, что я ищу (изображения размещены там, где красные квадраты):
Это мой код до сих пор:
<ScrollView style = {{flex: 1, backgroundColor: 'yellow',
}} >
{data.map(image => (
<View style = {styles.viewpic}>
<Image style = {styles.image} source = {{uri:image.url }}/>
</View>
))}
</ScrollView>
</SafeAreaView>
Это мой CSS:
viewpic: {
flex: 1,
flexWrap:'wrap',
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: 'blue',
},
image: {
justifyContent: 'center',
height: 115,
width: 115,
margin:6,
backgroundColor: 'red',
}
Это то, что я сейчас получаю:
До сих пор я пробовал каждую комбинацию CSS, которую только мог придумать, но пока ничего не сработало. Я также попробовал FLATLIST, но, честно говоря, мне не удалось должным образом преобразовать мой текущий код, чтобы он «соответствовал» требованиям Flatlists.
Спасибо всем за вашу помощь! Ваше здоровье!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
это ошибка HTML. На самом деле вы ставите стиль flex-wrap для каждого элемента, поэтому у вас один элемент на строку. Вы должны поместить все элементы в div flex-wrap, и он будет работать. Я надеюсь, что это поможет вам
<View style = {styles.viewpic}>
{data.map(image => (
<Image style = {styles.image} source = {{uri:image.url }}/>
))}
</View>
странно, у вас такой же результат?
Да, я пробовал разные комбинации CSS, но ничего не изменилось. Попытка FlatList снова, чтобы увидеть, получу ли я лучший результат. Спасибо!
Проверьте это, это то, что вы хотите? codeandbox.io/s/little-breeze-7jqdwt
Правильно, но если я создам 6 x "<Image>", это сработает. Однако мой проект вызывает API, который может отправлять обратно любое количество изображений, которое выберет пользователь. Вот почему вы видите только один тег изображения. У меня такое ощущение, что это ограничение реакции родного, но я работаю над тем, чтобы найти способ обойти это.
Я смог найти ответ! Я объединил 2 урока + несколько трюков и у меня получилось!
Сначала я построил свою сетку изображений, используя «FlatList». Я нашел отличный учебник с пошаговым описанием здесь (не моя страница, не аффилированная):Учебник Youtube Сначала я получал тот же результат, пока не добавил "numColumns = {}"
Вот код:
...
const numberOfCols = 3
...
return(
.
<View>
<FlatList
data = {data}
keyExtractor = {(item, index)=>{return item.date}}
numColumns = {numberOfCols}
renderItem = {({item, index})=>(
<View style = {styles.viewpic}>
<Image style = {styles.image} source = {{uri:item.url}}/>
</View>
)}
/>
Затем я использовал немного стратегии из этого урока (не моя страница, не аффилированная): Учебник по ютубу
Мне все еще нужно настроить css, чтобы он выглядел лучше, но пока я им доволен.
Вот конечный результат:
Это, к сожалению, не работает.