1. 홈
  2. 질의 응답
  3. react-native가 동일한 행의 TouchableOpacity 구성 요소를 가로로 렌더링하는 방법 - 가로로

react-native가 동일한 행의 TouchableOpacity 구성 요소를 가로로 렌더링하는 방법 - 가로로

2017-02-18 11 views
0

제품 구성 요소가 있습니다. 그림과 같이 TouchableOpacity가 있습니다. 제품 수는 동적입니다. 각 행에 2 개의 제품을 게시하고 싶습니다. 하지만 그럴 수는 없습니다. 가로로 설정하더라도 세로로 렌더링합니다. 어떻게 해결할 수 있습니까? 어떤 제안이 있으십니까?react-native가 동일한 행의 TouchableOpacity 구성 요소를 가로로 렌더링하는 방법 - 가로로

enter image description here

다음은 구성 요소

enter image description here

내 스타일이다 그리고 그들이 반응 - 네이티브 flexDirection의 기본값은 column입니다 enter image description here

출처

2017-02-18 Ali Zeynalov

답변

1

렌더링되는 방법이다. TouchableOpacity 목록의 컨테이너 스타일로 row으로 설정해야합니다. 당신은 컨테이너 크기가 다음 행으로 포장하는 초과하여 요소를 원하는 경우 https://facebook.github.io/react-native/docs/flexbox.html#flex-direction

, 당신은 flexWrap:"wrap"을 설정할 수 있습니다 여기에

은 공식 문서에서 예입니다. 다음은 문서입니다. https://facebook.github.io/react-native/docs/layout-props.html#flexwrap

출처

2017-02-18 21:08:07

+0

감사합니다. TouchableOpacity의 스타일링에서 '행'으로 flexDirection을 설정하면 첫 번째 행에 2 개의 제품 만 렌더링됩니다. 두 번째 제품은 표시되지 않습니다. @ Kevin Amiranoff –

+0

다음 행으로 래핑되지 않는 구성 요소에서 비롯된 것 같습니다. 'flexWrap : "noWrap"을'TouchableOpacity'의 컨테이너에 설정하면 작동합니까? 예를 들어'TouchableOpacity'의 목록 위에'View'가 있습니다. 그리고 문서 : https://facebook.github.io/react-native/docs/layout-props.html#flexwrap –

+0

대단히 감사합니다. 당신은 내 하루를 구 했어요 :) 나는 nowrap을 시도했지만 작동하지 않았습니다. 그러나 '랩핑'을 '랩핑 해제'대신 '랩핑'으로 설정하면 어떻게 든 작동합니다. –

 관련 문제

  • 관련 문제 없음^_^