[Today I Learned] 1월 2주차 day3

react-native에서 scrolltop 기능을 구현하고 싶었다.
웹에서는 position: fixed 속성이 먹히지만 네이티브에서는 아닌것 같다.
결국 기존 flatlist를 wrap으로 감싼 후 아이콘을 가져와서 스타일을 지정해 줬다.

  {/* flatlist 영역 */}
      <StyleFlatListWrap>
        {category === 'newbook' ? (
          <FlatList
            onScroll={(e) => setScrollVertical(e.nativeEvent.contentOffset.y)}
            ref={(ref) => {
              listViewRef = ref
            }}
            refreshing={isRefreshing}
            onRefresh={onRefresh}
            data={bookRequestData}
            renderItem={({ item }) => <NewBookItem book={item} />}
            keyExtractor={(item) => item.id}
          />
        ) : (
          <FlatList
            onScroll={(e) => setScrollVertical(e.nativeEvent.contentOffset.y)}
            ref={(ref) => {
              listViewRef = ref
            }}
            refreshing={isRefreshing}
            onRefresh={onRefresh}
            data={recommendBooks}
            renderItem={({ item }) => <NewBookItem book={item} />}
            keyExtractor={(item) => item.id}
          />
        )}
        {scrollVertical > CONTENT_OFFSET_THRESHOLD && (
          <StyleScrollIconWrap onPress={topButtonhandler}>
            <EvilIcons name="arrow-up" size={60} color="#61d2bc" />
          </StyleScrollIconWrap>
        )}
      </StyleFlatListWrap>
    </>
  )

flatlist를 wrap으로 감싼 후에 밑에 bottompagenation 부분까지 item들이 덮여져 버렸다.

처음에는 어쩔줄을 몰라 wrap으로 감싼 부분의 height 값을 수동으로 지정했지만,
기기마다 다르게 출력되는지라 기계에 따라 높이가 재각각 이였다.

결국 native 공식문서를 찾아봤고 해결책을 찾았다.

const StyleFlatListWrap = styled.View`
  flex: 1;
  position: relative;
  width: 100%;
`

flex:1 속성을 추가하면 영역부터 가능한 모든 빈 공간을 채우도록 지정해주는 속성이다. flex의 값이 커질수록 차지하는 공간이 더욱 커진다고 한다.
나중에 리액트네이티브로 스타일을 지정할 때 참고를 하도록 하자.