점점 js 파일이 많아져서 정리가 필요했다. src 폴더를 만들어서 App.js를 제외한 js파일들을 전부 넣어주었다. 그 과정에서 import 경로들이 바뀌었는데, 이 경우 오류가 발생하면 npm run android
를 다시 돌려주어야 하는듯.
React Native에서 화면을 전환할 때에는 Navigation을 사용한다.
NavigationContainer에 전환하려는 Screen들을 등록해두고, 이 Screen들 간의 화면 전환이 가능하게 해준다.
설치 및 사용 방법 튜토리얼
React Navigation Docs
npm install @react-navigation/native
npm install @react-navigation/native-stack
위의 패키지들을 사용하려면 포함하는 Dependencies들을 함께 설치해주어야한다.
npm install react-native-screens
npm install react-native-safe-area-context
// Navigation.js
import React from "react";
import { Search } from "./Search";
import Home from './Home';
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
const Stack = createNativeStackNavigator();
const Navigator = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={{headerShown: false}}/>
<Stack.Screen name="Search" component={Search} />
</Stack.Navigator>
</NavigationContainer>
);
}
App.js
가 Navigation.js
로 연결되도록 설정해두었다. 이 파일에 NavigationContainer
를 등록해 두어, 화면 전환에 사용할 Screen
들을 미리 등록해두었다.
Navigation은 기본적으로 화면 상단에 header가 나타난다. 만일 모든 화면에 대해 이 hdeader가 필요하지 않다면 다음과 같이 screenOptions
를 추가하면 된다.
<Stack.Navigator screenOptions={{headerShown: false}}
...
</Stack.Navigator>
만일 특정 화면에 대해서만 header가 필요하지 않다면, Screen
에 options
를 추가하면 된다.
<Stack.Screen options={{headerShown: false}} />
나는 Home에 대해서만 이 header가 필요하지 않으므로 Home에 해당하는 Screen
에만 해당 옵션을 추가해주었다. option과 관련된 상세한 docs는 여기를 참고해보면 된다.
Home
Component에서 버튼을 누르면, 이전에 구현해둔 Search
로 넘어가도록 구현해보았다. 여전히 디자인은 우선 미뤄두고….
const Home = ({navigation}) => {
return(
<View>
<Text> Home </Text>
<Button
title="Search"
onPress={()=>{ navigation.navigate('Search'); }}
/>
</View>
)
}
화면을 전환하려면 navigation.navigate(Screen Name)
함수를 이용한다. 이 때 navigation은 Parameter로 받아오는 Navigator 관련 Object이다. 전환하려는 Screen의 이름은 앞선 NavigationContainer에 등록되어있어야한다.
여기까지 수행하면 다음과 같이 동작하는 것을 확인할 수 있다.
Search
에서는 headerShown 옵션을 바꾸어주지 않아서 위에 header가 나타나는 것을 확인할 수 있다.
관련 내용은 여기를 참고하였다.
Screen간에 Parameter를 넘겨야할 경우가 있는데, 이럴 때에는 다음과 같이 route를 이용한다.
navigation.navigate('Profile', { name: 'Jane' })
해당 함수로부터 전환된 Screen은 다음과 같이 넘겨받은 값을 사용할 수 있다.
const ProfileScreen = ({ navigation, route }) => {
return <Text>This is {route.params.name}'s profile</Text>;
};
Search
Component를 좀 더 다듬은 다음 route를 사용할 것 같아서 기록만 우선 남겨두기.
과거에 한번씩 다뤘던 기능들을 다시 알아보면서 진행하는 과정이 조금 아쉽다. 기록을 남겨뒀으면 좋았을텐데. 그래도 확실히 해봤던 것들이라 예전보다는 속도가 빠른 것 같아서 조금 만족 중. 이번엔 착실하게 기록을 남겨두기!