포스팅에선 react-navigation 라이브러리 사용 예정.
yarn add @react-navigaiton/native
react-navigation 설치
yarn add react-native-screens react-native-safe-area-context
react-navigation 의존 라이브러리 설치
IOS 테스트를 한다면,
npx pod-install
1. 리액트 네이티브 내비게이션 설정
import {NavigationContainer} from '@react-navigation/native';
function App() {
return <NavigationContainer> ... </NavigationContainer>
}
export default App;
... 안에 내비게이션 설정을 JSX로 선언이 가능하다.
기존 웹의 경우, 웹 브라우저에 탑재되어있는 히스토리 기능을 통해 앞, 뒤로 이동이 가능하다
리액트 네이티브에서도 이와 비슷한 기능을 제공하기 위해 네이티브 스택 내비게이터를 사용한다
yarn add @react-navigation/native-stack
2. 네이티브 스택 내비게이터 설정
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import FirstScreen from '..';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="First" component={FirstScreen} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default App;
createNativeStackNavigator 함수를 이용하여 Stack이란 객체를 생성하면 Stack.Navigator와 Screen 컴포넌트 사용이 가능하다.
Screen에서 name은 컴포넌트에서 설정된 화면 이름을 설정하는 Props이다
(다른 화면 이동하거나 현재 화면을 조회할 때 사용)
3. 리액트 네이티브 화면 전환
..
function FirstScreen({navigation, route}) {
..
<Button title="버튼" onPress={() => navigation.navigate('Button', {id: route.params.id})} />
<Button title="버튼" onPress={() => navigation.push('Button', {id: route.params.id})} />
}
화면을 이동할 경우, navigation 객체를 Props로 받아와서 사용할 수 있으며
두 가지 방법이 존재한다.
* 라우트 파라미터는 객체 타입으로 설정하며 navigate, push의 두 번째 인자로 설정한다.
. navigate : 새로 이동하는 화면이 현재 화면과 같다면 새로운 화면을 쌓지 않고 화면의 파라미터만 변경
. push : 새로운 화면이 스택에 쌓여가며 화면 전환이 이루어짐
뒤로 가기의 경우엔
바로 이전 화면으로 이동하려면 navigation.pop()
아예 첫 화면으로 이동하려면 navigation.popToTop() 함수를 호출한다.
'IT 개발' 카테고리의 다른 글
AWS는 왜 계속 내 만원을 가져가나.. (Feat. 탄력적 IP 삭제) (0) | 2023.01.29 |
---|---|
Nextjs useEffect안의 router query가 빈값으로 나올 때 (0) | 2023.01.19 |
Firebase ReactNative 연동 에러 Error: [storage/unauthorized] User is not authorized to perform the desired action. (2) | 2022.02.10 |
리액트 불변성을 지키는 이유와 방법 (0) | 2022.02.10 |
ReactNative 리액트 네이티브 : 키보드 컨트롤하기 (IOS, Android 시뮬레이터 키보드) (0) | 2022.02.10 |