React Native Swiper 오류를 어떻게 해결하나요

“ScrollView”의 자식 레이아웃은 “contentContainerStyle” 속성을 통해 적용되어야 합니다.

React Native를 사용하고 react-native-swiper 라이브러리를 사용하는 경우, “ScrollView”의 자식 레이아웃은 “contentContainerStyle” 속성을 통해 적용되어야 한다는 오류가 발생할 수 있습니다. 이 오류는 이전에 경험하지 않았다면 다소 혼동스러울 수 있습니다. 하지만 걱정하지 마세요, 이 문제를 해결하는 데 도움을 드리겠습니다.

오류 이해하기

보고 있는 오류는 react-native-swiper 라이브러리의 Swiper 컴포넌트 사용과 관련이 있습니다. Swiper 컴포넌트는 내부적으로 다른 뷰 간의 스와이프를 처리하기 위해 “ScrollView”를 사용합니다. 그러나 올바른 레이아웃과 스타일링을 위해 “ScrollView”는 자식 레이아웃을 style 속성이 아닌 contentContainerStyle 속성을 통해 적용해야 합니다.

해결책: 코드 업데이트하기

이 오류를 해결하려면 코드를 수정하고 Swiper 컴포넌트의 contentContainerStyle 속성에 스타일을 적용해야 합니다. 업데이트된 코드를 살펴보겠습니다:

import React from 'react';
import { View, Text } from 'react-native';
import Swiper from 'react-native-swiper';

class WelcomeScreen extends React.Component {
  render() {
    return (
      <Swiper
        loop={false}
        index={0}
        contentContainerStyle={styles.wrapper}
        activeDotColor={'#EEE'}
      >
        <View style={styles.slide1}>
          <Text style={styles.text}>Choose category you like</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Bookmark articles that you</Text>
          <Text style={styles.text}>like</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>Get notifications about your</Text>
          <Text style={styles.text}>chosen topic</Text>
          <Button style={styles.text} onPress={() => this.props.navigation.navigate("Home")}>
            <Text style={styles.text}>Main Screen</Text>
          </Button>
        </View>
      </Swiper>
    );
  }
}

const styles = {
  wrapper: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    alignSelf: 'center',
    color: '#FFF',
    fontSize: 26,
    fontWeight: 'bold'
  },
};

export default WelcomeScreen;

설명

업데이트된 코드에서는 Swiper 컴포넌트의 style 속성을 contentContainerStyle로 대체했습니다. 이렇게 하면 스타일이 ScrollView의 자식 요소에 올바르게 적용됩니다.

또한 파일에서 React, View, Text 및 Swiper와 같은 필요한 컴포넌트 및 라이브러리를 가져왔는지 확인하세요.

결론

제안된 코드 업데이트를 따라야 ScrollView 자식 레이아웃과 관련된 오류를 해결할 수 있습니다. 스타일을 Swiper 컴포넌트의 style 속성이 아닌 contentContainerStyle 속성에 적용하는 것을 기억하세요. 즐거운 코딩 되세요!

참고 자료 : 

reactjs