[리액트 네이티브] ScrollView에서 flexDirection: row 좌우 수평 정렬 및 flexWrap 줄바꿈 적용 방법

# React Native - ScrollView 좌우배치 및 줄바꿈 적용 방법

 

- 문제 현상

리액트 네이티브에서  ScrollView의 스타일로 flexDirection: row를 적용해도

내부 요소들이  좌우로 수평 정렬되지 않는 현상이 있었다.

 

 

- 해결 방법

ScrollView 내부에 중간 View를 만들어 flexDirection: row 를 적용하면,

View 내부에 자식 요소들은 수평 정렬이 가능해진다.

 

줄바꿈까지 적용하려면 중간 View에 flexWrap: wrap 을 적용해주면 된다.

 

export default function ItemList() {
  const itemList = getItemList();
  
  return (
    <ScrollView style={styles.scrollView}>
      {/* 중간 컨테이너 View를 넣어줘야 함 */}
      <View style={styles.midContainer}>
        {itemList.map((item) => (
          <Item key={item.id} item={item} />
        ))}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scrollView: {
    width: '100%'
  },
  // 중간 View에 좌우 배치, 줄바꿈을 적용해주면 된다.
  midContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  }
});