styled-component로 ScrollView에서 alignItems 중간정렬하기

 

React Native ScrollView에서 중앙정렬하기

내가 하고 싶었던 것은 가로로 Scroll할 수 있는 영역을 설정하고, 그 속에 있는 컴포넌트들이 중앙에 위치한 형태를 만들고 싶었다.

하나도 안 어렵지 하면서 아래와 같이 align-itmes를 중앙으로 설정했는데 에러가 발생했다.

import React from 'react';
import Styled from 'styled-components/native';

const Container = Styled.ScrollView`
    flex-direction: row;
    align-items: center;
`;

 

 

문제해결 : attrs() 활용

이 때에는 

import React from 'react';
import Styled from 'styled-components/native';

const Container = Styled.ScrollView.attrs(() => ({
  contentContainerStyle: {
    alignItems: 'center',
  },
}))``;