[리액트 네이티브] 화면 이동

이번에는 화면 이동에 대해서 알아보았다!

간단한 화면 2개 만들어서 이동하도록 해보았다. 먼저 라이브러리를 설치해줘야한다.

npm install @react-navigation/native

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/stack

이렇게 3개를 다운받았다. 그리고 App.js 파일에 import 해준다.

import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

스크린은 2개를 간단하게 만들어주었다.
a.js

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

function a() {
    const navigation = useNavigation();
  return (
    <View>
      <Text>Start!</Text>
      <Button 
        title="go to main" 
        onPress={() => navigation.navigate('b')}
      />
    </View>
  );
}

export default a;

b.js

import React from "react";
import { View, Text } from "react-native";

function b() {
  return (
    <View>
      <Text>Start!222</Text>
    </View>
  );
}

export default b;

그리고 App.js를 수정해주어야 한다! 다음과 같이 수정해주면 된다~

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import a from "./screens/a";
import b from "./screens/b";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="a">
        <Stack.Screen name="a" component={a} />
        <Stack.Screen name="b" component={b} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

이렇게 한 후, 실행하면 a.js 화면이 출력된다.

그리고 버튼을 누르면 b.js 화면으로 이동한다!

initialRouteName을 잘 설정해주어야 첫 화면이 잘 뜬다!!! 간단하지만(오류가 좀 있었지만;;) 해결해서 기쁘다!!