React Native를 사용하여 이미지 그리드 만들기

Question

React Native에서 이미지 그리드를 만드는 데 도움을 주고 싶습니다.

배열의 매핑된 데이터를 사용하여 이미지 그리드를 만들려고 합니다. 매핑 부분은 잘 작동하지만 이미지가 원하는 대로 배치되지 않습니다. 이것이 내가 찾고 있는 것입니다(빨간색 사각형이 있는 위치에 있는 이미지).

지금까지 내 코드는 다음과 같습니다.

으아악

이것은 내 CSS입니다:

으아악

지금까지 얻은 내용은 다음과 같습니다.

지금까지 제가 생각할 수 있는 모든 CSS 조합을 시도했지만 지금까지 아무 것도 작동하지 않았습니다. 나는 또한 FLATLIST를 시도했지만 솔직히 말하면 현재 코드를 Flatlists의 요구 사항에 "맞게" 적절하게 변환할 수 없었습니다.

도와주신 모든 분들께 감사드립니다! 건배!

Answer 1

HTML 오류입니다. 실제로 각 요소에 대해 flex-wrap 스타일을 설정하므로 행당 하나의 요소만 있습니다. 작동하려면 모든 요소를 ​​flex-wrap div에 넣어야 합니다. 도움이 되길 바랍니다

으아악

Answer 2

답을 찾았습니다! 2개의 튜토리얼과 몇 가지 팁을 결합하여 해냈습니다!

먼저 "FlatList"를 사용하여 이미지 그리드를 구축했습니다. 여기에서 훌륭한 단계별 튜토리얼을 찾았습니다(내 페이지나 제휴가 아님): YouTube 튜토리얼 처음에는 "numColumns={ }"를 추가하기 전까지 동일한 결과를 얻었습니다

코드는 다음과 같습니다.

으아악

.

으아악

그런 다음 이 튜토리얼의 몇 가지 전략을 사용했습니다(내 페이지나 제휴 페이지 아님). 유튜브 튜토리얼

더 보기 좋게 만들기 위해 CSS를 계속 조정해야 하지만 지금까지는 만족합니다.

최종 결과는 다음과 같습니다.