Written by react-style
on 2021-12-27

[리액트 네이티브를 다루는 기술 #7] 5장 리액트 배비게이션으로 여러...

@ List

* 5.1 설치 및 적용하기

** 5.1.1 의존 패키지 설치하기

** 5.1.2 라이브러리 적용하기

* 5.2 기본적인 사용법

** 5.2.1 네이티브 스택 내비게이터

** 5.2.2 스크린 이동하기

** 5.2.3 라우트 파라미터

** 5.2.4 뒤로가기

** 5.2.5 헤더 커스터마이징하기

@ Note

1. react-navigation 의존 패키지 설치

// 모듈 설치 yarn add @react-navigation/native // 의존 라이브러리 설치 yarn add react-native-screens react-native-safe-area-context

- reference : https://reactnavigation.org/docs/getting-started

2. 주요 함수

- navigation.push() : 새로운 화면이 스택이 쌓여가면서 전환됨, 뒤로가기 클릭 시 이전 화면 열림

- navigation.navigate() : 새로운 화면이 현재 화면과 같으면 화면을 쌓지않고 파라미터만 변경함, 뒤로가기 클릭 시 홈 화면 열림

- navigation.pop() : 뒤로가기

- navigation.popToTop() : 처음으로 가기

3. 화살표 함수 사용 시 주의점

- 화살표 함수 호출 시 바로 반환하는 경우는 중괄호와 return 생량 가능

> const add = (a, b) => { return a + b };

> const add = (a, b) => a + b;

- 바로 반환하는 값이 객체 타입이면 객체를 소괄로 감싸줘야 함

> const createObject = (a, b) => { return {a, b}; };

> const createObject = (a, b) => ({a, b})

4. navigation, route 파라미터의 사용

- HomeScreen({navigation}) 에서 navigation.push('Detail', {id: 1})} 로 id값 넘겨줌

- DetailScreen({route}) 에서 route.params.id 로 id 값 불러옴

DetailScreen 에 넘어오는 route, navigation Props의 정보

5. Header 커스터마이징 시 Options Props

> Stack.Navigatior 의 screenOptions={} : 모든 화면에 공통으로 적용할 때

> Stack.Screen 의 options={} : 개별 화면에 적용할 때

- reference : https://reactnavigation.org/docs/native-stack-navigator#options

# App.js

import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import HomeScreen from './screens/HomeScreen'; import DetailScreen from './screens/DetailScreen'; import {View, Text, TouchableOpacity, SafeAreaView} from 'react-native'; import HeaderlessScreen from './screens/HeaderlessScreen'; const Stack = createNativeStackNavigator(); function App() { return ( ( Left ), headerTitle: ({children}) => ( {children} ), headerRight: () => ( Right ), }} /> ); } export default App;

# screens > HomeScreen.js

import React, {useEffect} from 'react'; import {View, Button} from 'react-native'; import HeaderlessScreen from './HeaderlessScreen'; function HomeScreen({navigation}) { // useEffect(() => { // navigation.setOptions({title: '홈'}); // }, [navigation]); return ( navigation.navigate('Detail')} onPress={() => navigation.push('Detail', {id: 1})} /> navigation.push('Detail', {id: 2})} /> navigation.push('Detail', {id: 3})} /> navigation.push('Headerless', {id: 4})} /> ); } export default HomeScreen;

# screens > DetailScreen.js

import React, {useEffect} from 'react'; import {View, Text, StyleSheet, Button} from 'react-native'; function DetailScreen({route, navigation}) { useEffect(() => { navigation.setOptions({ title: `상세 정보 - ${route.params.id}`, }); }, [navigation, route.params.id]); return ( id: {route.params.id} navigation.navigate('Detail', {id: route.params.id + 1})} onPress={() => navigation.push('Detail', {id: route.params.id + 1})} /> navigation.pop()} /> navigation.popToTop()} /> ); } export default DetailScreen; const styles = StyleSheet.create({ block: { flex: 1, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 48, }, buttons: { flexDirection: 'row', }, });

# screens > HeaderlessScreen.js

import React from 'react'; import {View, Text, Button} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; function HeaderlessScreen({navigation}) { return ( Header가 없네? navigation.pop()} title="뒤로가기" /> ); } export default HeaderlessScreen;

이전 이전 01234 ios / android - Stack 전환 테스트

이전 이전 012345 ios / android - Header 커스터마이징

반응형

from http://bocoder.tistory.com/65 by ccl(A) rewrite - 2021-12-27 22:01:09

Top