[클라우딩 어플리케이션 엔지니어링 TIL] 240419 - React Native 캠핑앱 만들기 프로젝트 (3)

Intro

---

3일차에는 Article 페이지를 구현하였다. firebase를 연동할 예정이라 프로젝트에서 제공된 API는 불러오지 않았다.

 

✅ Article UI 구현

➡️ Home UI 구현

✅ 무한 스크롤에서 발생하는 오류 해결

 

 

 

프로젝트 진행상황

---

ImageBackground

아티클 헤더로 쓰이는 각종 캠핑 정보 박스를 구현할 때 사용한 컴포넌트

이미지가 들어간 박스를 만들고 싶어서 react-native의 ImageBackground 컴포넌트를 사용해보았다.

import { ImageBackground, ...
} from 'react-native';

<ImageBackground
          source={require('../../assets/articleLogoImg.png')}
          style={styles.articleLogo}
          imageStyle={styles.articleLogoImg}>
          <Text style={styles.articleLogoTitle}>각종 캠핑 정보</Text>
          <Text style={styles.articleLogoComment}>
            캠핑투게더가 제공하는 각종 꿀팁으로 캠핑을 더 풍성하게 즐겨보세요.
          </Text>
        </ImageBackground>

 

 

 

스크롤 내릴 때 헤더 숨기는 기능 구현하기

 

헤더가 사이즈가 커서 게시글이 1개 반만 보이는 상황이다. 사용자의 UI/UX를 고려했을 때 좋지 않아 보였다.

헤더와 함께 스크롤을 내리면 sort by가 가려지기 때문에 UX가 비효율적으로 보였다.

이런 상황을 해결하기 위해 스크롤을 내렸을 때 sort by는 유지하고 헤더만 사라지는 기능을 구현해보고자 했다.

 

const [infoVisible, setInfoVisible] = useState(true);

const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
  const currentOffset = event.nativeEvent.contentOffset.y;

  if (currentOffset > 1 && infoVisible) {
    setInfoVisible(false);
  } else if (currentOffset <= 1 && !infoVisible) {
    setInfoVisible(true);
  }
};

 

스크롤이 내려갔는지 확인하기 위해 contentOffset이라는 메서드를 가져왔다.

<FlatList
          data={sortedArticles}
          removeClippedSubviews
          showsVerticalScrollIndicator={false}
          renderItem={({ item }) => <ArticleList {...item} />}
          onScroll={handleScroll}
          scrollEventThrottle={20}
        />

 

FlatList의 onScroll 속성을 활용해 스크롤이 내려갈 때 handleScroll 콜백 함수를 호출하도록 구현하였다.

자연스럽게 사라지려면 Animated 컴포넌트를 사용해야 할 것 같은데 일단 여기까지 구현해 보았다.

 

 

상세페이지 구현하기

 

카드를 눌렀을 때 해당 게시글의 상세 페이지로 이동하는 화면을 구현하였다.

게시글 데이터는 react-navigation의 route 속성으로 params를 넘겨주었다.

 

 

 

최신순/즐겨찾기순 모달창 구현하기

 

 

모달창 구현을 위해 react-native-modal 라이브러리를 사용하였다.

최신순/즐겨찾기순 선택 후 Save 버튼을 클릭하면 모달이 닫히면서 만약에 최신순 -> 즐겨찾기순 또는, 즐겨찾기순 -> 최신순으로 바뀌었다면 페이지가 다시 로드되도록 구현하였다.

 

 

 

 

추후 진행사항

---

 

다음 작업해야 할 것들

• Home UI 구현
• Community UI 구현
• 로그인/회원가입 구현