학습내용
- Detail 페이지 제작
- Movies-Detail 연결
import { StyleSheet, ActivityIndicator, Linking } from "react-native";
const Detail = ({
route: {
params: { movieId },
},
}) => {
const getMovies = async () => {
const results = await fetch(
`${BASE_URL}/${movieId}?api_key=${API_KEY}&language=ko&append_to_response=videos`
).then((res) => res.json());
setMovies(results);
setLoading(false);
};
const openYoutube = async (key) => {
const url = `https://www.youtube.com/watch?v=${key}`;
await Linking.openURL(url);
};
(중략)
}
기존의 통신 방식과 동일하나 통신 URL이 변경되었다. Movies 페이지에서 영화를 클릭시 해당 영화에 관한 정보를 얻어오기 위해 ${movieId}
가 추가되었으며, 유튜브 링크 데이터를 얻어오기 위해서 append_to_response=videos
가 추가되었다.
Linking
링크로 이동하는 리액트 네이티브 내장 라이브러리. 링크에 해당하는 플랫폼이 디바이스에 설치되어 있다면 해당 어플로 자동 연결되며, 미설치시 인터넷창으로 이동한다.
return (
<Movie
onPress={() =>
navigate("Stacks", { screen: "Detail", params: { movieId: movie.id } })
}
>
(중략)
</Movie>
);
Movies에 포함된 HorizonCards, VerticalCards 컴포넌트에서 Detail 페이지로 이동.
클릭한 영화의 상세페이지를 로딩할 수 있도록 해당 영화의 id
값을 params
로 넘겨준다.