2021-07-18 :: React Native; Interaction

Navigating Between Screens

모바일 앱은 보통 여러개의 화면으로 구성이 되어 있다. 여러개의 화면에 대한 표현과 전환은 navigator를 통해 컨트롤 한다.

React Native Navigation

installation

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

for iOS

cd ios
pod install
cd ..

react-native-gesture-handler의 설정을 끝내기 위해 index.js나 App.js의 엔트리 파일의 가장 위에 import문을 넣어준다.

또한 엔트리 파일의 최상위 컴포넌트를 NavigationContainer로 감싸준다.

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

const App = () => {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
};

export default App;

 

Usage

아래예제는 Stack.Screen 컴포넌트를 이용해서 두 개의 스크린을 지정했다. 각 스크린은 컴포넌트를 prop으로 가진다. 

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Welcome' }}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

이 컴포넌트들은 navigation이라는 prop을 가지고 이 prop을 통해 다양한 네비게이션 메서드를 사용할 수 있다. 아래 예시에서는 navigation.navigate 메서드를 이용해 다른 페이지로의 이동을 설정했다.

const HomeScreen = ({ navigation }) => {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', { name: 'Jane' })
      }
    />
  );
};
const ProfileScreen = ({ navigation, route }) => {
  return <Text>This is {route.params.name}'s profile</Text>;
};