React-Native / Refreshing, TextInput, Tab to Stack,LinearGradient, APIs , Infinite Scroll

Refreshing 할 때 IOS는 살짝 위아래로 움직이는 현상 또는 android는 loading indicator가 여러번 나오는 것에 대해..

react query를 사용해서 여러개의(하나는 상관이 없음) usequery의 isRefetching을 통해 boolean을 넘겨주는 구현을 했을때 Refresh를 했을 때 살짝 위아래로 움직이는 현상이 있다. 여려개의 데이터를 가져올때 components들도 다시 랜더링이 되기 때문이다.

이를 해결하기위해 useState와 useQueryClient를 사용해서 코드를 작성하면 도움이 된다.

const [refresh , setRefresh]=useState(false)

const queryClient = useQueryClient();

const activeRefresh = async () => {
    setRefresh(true);
    await queryClient.refetchQueries(["TV"]);
    setRefresh(false);
  };

 

TextInput에서 글씨변화 감지

  const [sTxt, setSTxt] = useState("");
  const onChangeTxt = (text: string) => setSTxt(text);
  return (
    <Container>
      <SearchBar
        placeholder="Search for Movie or Tv Show"
        placeholderTextColor="grey"
        returnKeyType="search"
        autoCapitalize="sentences"
        onChangeText={onChangeTxt}
      />
    </Container>

 

React-Query로 query보내주기

querykeys를 string으로만 보낼 필요가 없다. 원한다면 array도 보낼수있다. react-query를 사용함으로써 query의 key를 fetcher에 보내줄수 있다.

//Some.tsx
...
const [searchTxt, setSearchTxt] = useState("");
  const {isLoading, data, refetch } = useQuery(["searchMovies", searchTxt], movieApi.search, 
  {
    enabled: false,
  });
...

// api.ts

const api ={
 search: ({queryKey}: any) => { //queryKey는 약속된 인자이다. 이름을 바꿔서는 안된다.
    const [_, query] = queryKey;
    return fetch(
      `${BASE_URL}/search/movie?api_key=${API_KEY}&language=ko&page=1&query=${query}`
    )
      .then((res) => res.json())
      .catch((e) => console.log(e));
  },
}

 

Tab에서 Stack으로..

Tab에서 세부페이지로 옮겨갈때 Stack으로 이동하게 되는데 여기서 Tab에 있던 정보를 Stack으로 보내주는 방법이다.

텝의 하위에 있는 파일에서 TouchableOpacity에 onPress를 눌러 해당 stack의 하위 파일로 가는 코드를 짜주자

const goToDetail = () => {
    navigation.navigate("Stack", {screen: "Detail"})
    };
    
   return
   
   <TouchableOpacity onPress={goToDetail}>

여기서 parameter도 보내줄수 있다. parametet는 어떤 종류로든 보내줄수 있다.

  const goToDetail = () => {
    navigation.navigate("Stack", {
      screen: "Detail",
      params: {
        parameter
      },
    });
  };

 

그리고 해당 컴포넌트에서 props를 확인해주자

const Detail: React.FC = (props) => {
  console.log(props);
  return (
    <DetailCont>
      <DetailTxt></DetailTxt>
    </DetailCont>
  );
};

확인한 props에는 navigation과 우리가 보낸 sreen과 params가 있다.

https://reactnavigation.org/docs/navigation-prop#setoptions

Navigation prop reference | React Navigation

 

TIP

"title" in params ? params.title : params.name

title이 param안에 있는지 확인해서 그것이 맞다면 params.title이고 거짓이면 params.name을 반환하라.

 

LinearGradient

https://docs.expo.dev/versions/latest/sdk/linear-gradient/

npx expo install expo-linear-gradient

사용법은 쉽다.

 

Linking API

링크를 열 수 있도록 허가해 준다.

import { Linking } from "react-native";
const openLink = async (videoID: string) => {
    const baseUrl = `https://주소/aa?bb=${videoID}`;
    await Linking.openURL(baseUrl)
  };

 

Expo Web Browser

어플리케이션 내의 브라우저를 열도록 허용해준다.

import * as WebBrowser from 'expo-web-browser';

const openLink = async (videoID: string) => {
    const baseUrl = `https://주소/aa?bb=${videoID}`;
	await WebBrowser.openBrowserAsync(baseUrl)
  };

 

Share API

공유하는 방법

  const shareMedia = async () => {
    await Share.share({
      message: 공유할 문구,
      url: URL공유 //IOS 만 가능,
      title: 메세지의 타이틀 //android만 가능
    });
  };

 

Platform API

어떤 플랫폼을 사용하는지 알수있다

import { Platform } from "react-native";
const isAnroid = Platform.OS === "android";

 

BIG TIP

FlatList를 사용할때 StyledComponent로 만들게 된다면 data prop을 타입도 잘 주었는데 keyExtractor의 item이나 renderItem의 오브젝트들이 undefined로 나올때가 있다 이때 두가지 방법이 있는데

하나는 직접 FlatList를 사용하는 방법

두번째는 const Wrapper = styled.FlatList`` as unknown as typeof FlatList

이렇게 작성하면 타입이 인식이 될것이다.

Infinite Scroll

FlatList의 prop으로 onEndReach와 onEndReachedThreshold 사용해 구현을 할 수 있다.

onEndReach 은 바닥에 닿았을때 함수를 실행시킬수 있다.

onEndReachedThreshold은 onEndReach를 실행시키려는 목록의 하단에서 내용의 끝까지의 거리이다. 0.5라고 값을 주었을때 내용의 끝이 목록의 보이는 길의의 절반 안에 들어왔을 때 onEndReach를 실행시킨다.

 

infinite Quries

#https://tanstack.com/query/v3/docs/react/guides/infinite-queries

useQuery말고 useInfiniteQuery를 사용해서 data를  flat매소드를 통해 Array 속 Array들을 정리해주자

다음으로 fetcher 뒤에 option으로 getNextPageParam사용하는데 여기에는 두개의 인자를 받을 수 있다.

첫째로 우리가 마지막으로 fetch한 페이지지고 두번째는 지금까지 부른 모든 페이들의 배열이다.

또한 page parameter를 갖게 되면 fetch한 함수에 즉시 전달이 된다.

 const {isLoading, data } =
    useInfiniteQuery<IType>(
      [category, key],
      fetch function,
      {
        getNextPageParam: (currentPage) => {
          const nextPage = currentPage.page + 1;
          nextPage > currentPage.total_pages ? null : nextPage;
        },
      }
    );
    
    //api
     getData: ({pageParam}: any) =>
    fetch(
      `${BASE_URL}/aaa/bbb?api_key=${API_KEY}&page=${pageParam}`
    )
      .then((res) => res.json())
      .catch((e) => console.log(e)),
      
      //pageParam이 안될때는 pageParam ?? 1 을 시도 해볼것