React-Native Screen

Screen

RN 에서는 화면을 전환할 때 브라우저의 히스토리 기능과 비슷한 사용성을 제공하기 위해 Native Stack Navigator 라는 것을 제공.

1. 라이브러리 설치

npm install @react-navigation/native-stack

2. screens 폴더 만들고 컴포넌트 만들기

const SignupScreen = ({navigation}: SignupScreenProps) => {
    return (
        <View>
            <Text>Sign Up Screen</Text>
            <Button title="Todo" onPress={() => navigation.navigate("Main")}></Button>
        </View>
    )
}

export default SignupScreen;

3. App.tsx에 컴포넌트 추가하기

import React from "react";
import {NavigationContainer} from "@react-navigation/native";
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import SignupScreen from "./screens/SignupScreen";
import SignupScreen from "./screens/MainScreen";

export default functioin App() {
	<RecoilRoot>
		<NavigationContainer>
          // initialRouteName는 앱 처음 로딩시 띄워질 screen 지정 
			<Stack.Navigator initialRouteName="Main">
				<Stack.Screen name="Main" component={MainScreen} />
				<Stack.Screen name="Signup" component={SignupScreen} />
			</Stack.Navigator>
		</NavigationContainer>
	</RecoilRoot>
}

type 추가

ex. SignupScreen 컴포넌트의 props로 전달된 {navigation} 의 타입 지정하기

import React from "react";
import { View, Text, Button } from "react-native";
import{ NativeStackNavigationProps } from "@react-navigation/native-stack";

// 화면을 어디로 전환시켜줄지에 대한 타입 추가 즉, navigation.navigate(""); 의 ""안에 들어갈..
type RootStackParamList = {
	Signup: undefined;
	Main: undefined;
}

type SignupScreenNavigationProp = NativeStackNavigationProps<
	RootStackParamList,
	"Signup" // 컴포넌트에 적용된 navigation 명 (App.tsx 참고)
>

interface SignupScreenProps {
	navigation: SignupScreenNavigationProp;
}

최종 코드

import React from "react";
import {View, Text, Button} from 'react-native';
import {NativeStackNavigationProp} from "@react-navigation/native-stack";

type RootStackParamList = {
    Signup: undefined;
    Main: undefined;
}

type SignupScreenNavigationProp = NativeStackNavigationProp<
    RootStackParamList,
    "Signup"
>

interface SignupScreenProps {
    navigation: SignupScreenNavigationProp;
}

const SignupScreen = ({navigation}: SignupScreenProps) => {
    return (
        <View>
            <Text>Sign Up Screen</Text>
            <Button title="Todo" onPress={() => navigation.navigate("Main")}></Button>
        </View>
    )
}

export default SignupScreen;