[React Native] Stack navigation 사용하기 2 (2022년 기준)

React 목록

react-native navigation 설치

$ npm install @react-navigation/native --save
$ npm install react-native-screens react-native-safe-area-context --save
$ npm install @react-navigation/native-stack --save

 

 

iOS 모듈 설치

$ cd ios
$ pod install
$ cd ..

 

 

Android 모듈 설치

...
import android.os.Bundle;

public class MainActivity extends ReactActivity {

  ...

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }

  ...
}

 

 

 

파일생성

$ mkdir screens
$ touch StackNavigation.tsx
$ touch screens/HomeScreen.tsx
$ touch screens/DetailScreen.tsx
$ touch screens/ModalScreen.tsx

 

 

 

App.tsx

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

const App = () => {
  return (
    <NavigationContainer>
      <StackNavigation />
    </NavigationContainer>
  );
};

export default App;

 

 

 

StackNavigation.tsx

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';
import ModalScreen from './screens/ModalScreen';

const Stack = createNativeStackNavigator();

const StackNavigation = () => {
  return (
    <Stack.Navigator screenOptions={{headerShown: true}}>
      <Stack.Group>
        <Stack.Screen name="home" component={HomeScreen} />
        <Stack.Screen name="detail" component={DetailScreen} />
      </Stack.Group>

      <Stack.Group screenOptions={{presentation: 'modal', headerShown: true}}>
        <Stack.Screen name="modal" component={ModalScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
};

export default StackNavigation;

 

 

 

HomeScreen.tsx

import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {Text, StyleSheet, SafeAreaView, Button} from 'react-native';

const HomeScreen = () => {
  const navigation = useNavigation();

  return (
    <SafeAreaView style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="go to detail screen"
        onPress={() => {
          navigation.navigate('detail' as never);
        }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default HomeScreen;

 

 

 

DetailScreen.tsx

import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {Text, StyleSheet, SafeAreaView, Button} from 'react-native';

const DetailScreen = () => {
  const navigation = useNavigation();

  return (
    <SafeAreaView style={styles.container}>
      <Text>Detail Screen</Text>
      <Button
        title="open modal screen"
        onPress={() => {
          navigation.navigate('modal' as never);
        }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default DetailScreen;

 

 

 

 

ModalScreen.tsx

import React from 'react';
import {Text, StyleSheet, SafeAreaView} from 'react-native';

const ModalScreen = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Modal Screen</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ModalScreen;

 

 

 

 

React 목록