[내일배움캠프 TIL] 54일차

오늘 새로 배운 것

React Native에서 FlatList와 Swiper로 각각 구현하기

FlatList

선택할 수 있는 리스트 카드들이 한 화면에 여러개가 보인다.
extradata 속성은 해당 값에 변동이 있을 때 flatlist가 리렌더링되는 것

 <FlatList
        contentContainerStyle={styles.locationFlatList}
        horizontal
        showsHorizontalScrollIndicator={false}
        // onEndReached={loadMoreData}
        data={LocationData}
        extraData={selectedLocation}
        renderItem={({ item }) => {
          const isSelectedLocation =
            item.orgCd === selectedLocation ? true : false;
          return (
            <LocationList
              loc={item.orgdownNm}
              onPress={() => setSelectedLocation(item.orgCd)}
              isSelectedLocation={isSelectedLocation}
            />
          );
        }}
        keyExtractor={(item) => item.orgCd}
        ItemSeparatorComponent={<View style={{ width: 10 }} />}
      /> 

Swiper

리스트 카드들이 한 화면에 하나씩 선택할 수 있도록 보인다.

<Swiper
        // style={styles.locationFlatList}
        showsButtons
        loop={false}
      >
        {LocationData.map((e) => {
          const isSelectedLocation =
            e.orgCd === selectedLocation ? true : false;
          return (
            <LocationWrapper>
              <LocationList
                key={e.orgCd}
                loc={e.orgdownNm}
                onPress={() => setSelectedLocation(e.orgCd)}
                isSelectedLocation={isSelectedLocation}
              ></LocationList>
            </LocationWrapper>
          );
        })}
</Swiper>