게으름을 위한 부지런한 게으름뱅리' 블로그

React Native 하루 기록 - map, ScrollView 본문

IT/FrontEnd

React Native 하루 기록 - map, ScrollView

LazismLee 2022. 12. 10. 14:54
반응형

Map

  • 반복되는 data를 그릴때 사용
  • 순차적으로 순회 후 return 
  • 배열의 길이 만큼 return
  • 각각의 item들은 unique한 key가 있어야 한다.
export default (props) => {
    return (
        //showsVerticalScrollIndicator :스크롤 바 감추기 
        //contentContainerStyle : 맨아래로 스크롤 했을 경우 아래가 잘리지 않고 보임
        <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingBottom : bottomSpace }}>
            {/* Map에서 key를 설정해주지 않으면 경고, key는 최상단 root 컴포넌트에 있어야 한다 */}
            { props.data.map((item, index) => (
                <View key={index} >
                    <Profile uri={item.uri} name={item.name} introduction={item.introduction}/>
                    <Margin height={13}></Margin>
                </View>
            )) }
        </ScrollView>
    )
}
반응형
Comments