React Navigation - Stack

주제 : 리액트 네이티브에서 네비게이션 설치하고 사용하기

• yarn을 사용해서 설치

[ 1 ] 리액트 네비게이션 설치
https://reactnavigation.org/docs/getting-started

1. yarn add @react-navigation/native
2. yarn add react-native-screens react-native-safe-area-context
3. npx pod-install ios
4. 경로에 아래 코드 추가하기

경로 : android/app/src/main/java//
Add the highlighted code to the body of MainActivity class:

추가
import android.os.Bundle;
  
class MainActivity: ReactActivity() {
  
  // ...
  
  추가
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
  // ...
}

[ 2 ] Stack Navigator 설치
https://reactnavigation.org/docs/stack-navigator

1. yarn add @react-navigation/stack
2. yarn add react-native-gesture-handler
3. index.js or App.js에 아래 코드 추가

import 'react-native-gesture-handler';

4. yarn add @react-native-masked-view/masked-view
5. npx pod-install ios

[ 3 ] Navigator 사용
https://reactnavigation.org/docs/hello-react-navigation

경로: App.tsx 
  
import {NavigationContainer} from '@react-navigation/native';
import AuthStackNavigator from './src/navigation/AuthStackNavigator';
function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <AuthStackNavigator />
    </NavigationContainer>
  );
}

경로: src/navigation/AuthStackNavigator.tsx
  
import {createStackNavigator} from '@react-navigation/stack';
import AuthHomeScreen from '../screens/AuthHomeScreen';
import LoginScreen from '../screens/LoginScreen';

const Stack = createStackNavigator();
function AuthStackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="AuthHome" component={AuthHomeScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
  );
}

• name은 네비게이션 스택에서 각 스크린을 식별하는 데 사용되는 이름입니다.
• 네비게이션을 통해 다른 화면으로 이동할 때 이 이름을 사용합니다.

function AuthHomeScreen({navigation}) {
  return (
    <SafeAreaView>
      <View>
        <Button
          title="Go to Login"
          onPress={() => navigation.navigate('Login')}
        />
      </View>
    </SafeAreaView>
  );
}

• 리액트 네이티브에서 네비게이터의 Screen 컴포넌트의 component 속성에 등록된 컴포넌트는 자동으로 navigation props를 받기때문에 네비게이션 기능에 접근할 수 있습니다.