TIL : react native 프로젝트

youtube 플레이어 넣기

React Native Youtube-iframe 라이브러리 이용하기

( 참고 : React Native Youtube-iframe 사이트 )

설치하기

• react-native-webview 설치하기
  : yarn add react-native-webview
• react-native-youtube-iframe 설치하기
  : yarn add react-native-youtube-iframe

사용하기

import YoutubePlayer from "react-native-youtube-iframe";

const [playing, setPlaying] = useState(false);

  const onStateChange = useCallback((state) => {
    if (state === "ended") {
      setPlaying(false);
      Alert.alert("video has finished playing!");
    }
  }, []);

return(
   <YoutubePlayer
     height={"100%"}
     play={playing}
     videoId={data?.data().videoLink?.slice(-11)}
     onChangeState={onStateChange}
   />
);

• YoutubePlayer   import 하기.
• 개별 youtube 영상에 있는 videoId 값 입력하기.

( videoId 는 유튜브 url의 마지막 11글자이다.
post시, 유튜브링크를 입력받았기 때문에,
database에서 받아올때,.slice() 메서드를 이용해 videoId 값을 넘겨 주도록 했다. )

튜터님 피드백 중 고쳐야 할 점 !

1. 프로젝트 문서에는 프로젝트를 자랑하는 내용이 들어가야 한다!
2. 프로젝트 문서는 공식적인 문서임을 잊지말자!
3. 불필요한 코드는 넣지 말기!

   export const getDetail = async ({ queryKey }) => {
     const [_, postId] = queryKey;
     return await getDoc(doc(dbService, "posts", postId));
   };
   // ⬇︎⬇︎⬇︎⬇︎
   export const getDetail =({ queryKey }) => {
     const [_, postId] = queryKey;
     return getDoc(doc(dbService, "posts", postId));

   ⇒   useQuery(queryKey, queryFn) 의 queryFn의 형태는 () => Promise 이므로, Promise를 반환하도록 async함수를 사용했지만, getDoc() 자체가 Promise를 반환하는 코드이므로 aync를 사용하지 않아도 된다.