React Native) Native Stack Navigator 사용하기

리액트 네이티브에서 여러화면을 관리하기 위한 네비게이션 사용법 확인

---

라이브러리 적용하기

관련 라이브러리 : react-navigation

이를 위한 의존 라이브러리 미리 설치 필요)

yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context

라이브러리 적용하기)

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';

function App() {
	return <NavigationContainer>{/* 네비게이션 설정 */}</NavigationContainer>;
}

export default App;

---

 

Native Stack Navigator

라이브러리 추가 설치 필요)

yarn add @react-navigation/native-stack

사용 방법)

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';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

- initailRouteName : 기본적으로 보여주는 화면(최초화면)

---

 

스크린 이동하기

navigation.navigate(화면명) 혹은 navigation.push(화면명) 함수 호출하여 이동

예시)

import React from 'reac';
import {View, Button} from 'react-native';

function HomeScreen({navigation}) {
    return (
        <View>
            <Button
                title="Detail 열기"
                onPress={() => navigation.navigate('Detail')}
            />
        </View>
    );
}

export default HomeScreen;

* navigate/push 함수 차이
- navigate : 새로 이동할 화면은 무조건 새로운 화면을 쌓으면서 이동
- push : 새로 이동할 화면이 현재 화면과 같으면 새로운 화면 스택을 쌓지 않고 파라미터만 변경

---

 

라우트 파라미터

새로운 화면 전환 시, 전달할 파라미터를 설정하는 객체 변수

사용 예시 - 전달하기)

<Button
	title="Detail 1 열기"
    onPress={() => navigation.push('Detail', {id:1})}
/>
<Button
	title="Detail 2 열기"
    onPress={() => navigation.push('Detail', {id:2})}
/>
<Button
	title="Detail 3 열기"
    onPress={() => navigation.push('Detail', {id:3})}
/>

사용 예시 - 파라미터 전달받아 활용하기)

function DetailScreen({route}) {
	return (
    	<View>
        	<Text>id : {route.params.id}</Text>
        </View>
    );
}

* 각 화면마다 Text 출력 내용이 "id : 화면번호" 로 나옴

---

 

뒤로 가기

navigation.pop() : 뒤로 가기(이전 화면)
navigation.popToTop() : 가장 첫 번째 화면으로 가기

---

 

헤더 커스터마이징 하기

방법 1) Stack.Screen 태그의 option Props 설정하기

<Stack.Screen
	name="Home"
    component={HomeScreen}
    options={{
    	title: '홈', //화면 타이틀 텍스트 설정
    }}
/>

방법 2) 화면 컴포넌트에서 navigation.setOptions 함수 사용

function HomeScreen({navigation}) {
	useEffect(() => {
    	navigation.setOptions({title: '홈'});
    }, [navigation]);
    return (...);
}

* ESLint 규칙상 useEffect deps에 [navigation] 입력 필요
* 두 방법 중복 사용 시, 방법 2가 방법 1을 덮어 씀

---

 

헤더 스타일 변경하기

스타일을 설정할 수 있는 option 값 예시)

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    title: '홈',
    // Header 블록에 대한 스타일(색상 등)
    headerStyle: {
      backgroundColor: '#29b6f6',
    },
    // Header 텍스트, 버튼 색상
    headerTintColor: '#ffffff',
    // 타이틀 텍스트 스타일
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 20,
    },
    // 헤더에 배치되는 뒤로가기 화살표 버튼 표시 여부
    headerBackVisible: false,
    // 헤더 좌측 영역에 컴포넌트 삽입
    headerLeft: ({onPress}) => (
      <TouchableOpacity onPress={onPress}>
        <Text>Left</Text>
      </TouchableOpacity>
    ),
    // 헤더 타이틀 영역에 컴포넌트 삽입
    headerTitle: ({children}) => (
      <View>
        <Text>{children}</Text>
      </View>
    ),
    // 헤더 우측 영역에 컴포넌트 삽입
    headerRight: () => (
      <View>
        <Text>Right</Text>
      </View>
    ),
  }}
/>

---

 

헤더 숨기기

특정 화면에서만 헤더 숨기기 - Stack.Screen options에 headerShown 값 false)

<Stack.Screen
  name="Headerless"
  component={HeaderlessScreen}
  options={{
    headerShown: false,
  }}
/>

전체 화면에서 헤더 숨기기 - Stack.Navigator screenOptions에 headerShown 값 false)

<Stack.Navigator
	initialRouteName="Home"
    screenOptions={{
    	headerShown: false,
    }}
>

iOS에서 StatusBar 영역 침범 방지 태그 등록 - SafeAreaView로 감싸기)

import React from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';

function HeaderlessScreen({navigation}) {
    return (
        <SafeAreaView>
        (...)
        </SafeAreaView>
    );
}

export default HeaderlessScreen;

React Native) Native Stack Navigator 활용하기