React Navigation V5 : 중첩 스택 및 탭 탐색 생성 방법

최종 결과

안녕하세요 여러분, 모두 안전하고 잘 지내길 바랍니다!
여기에서는 반응 탐색 버전 5를 사용하여 스택 및 탭 탐색을 만들었습니다.
JavaScript, React 및 React Native에 이미 익숙하다면 React Navigation으로 빠르게 이동할 수 있습니다!

설명

먼저 명령을 사용하여 프로젝트를 만듭니다.expo init navigations
그런 다음 탐색에 필요한 패키지를 설치하십시오.
yarn add @react-navigation/native
또한 대부분의 네비게이터에서 사용하는 종속성을 설치하고 구성한 다음 몇 가지 코드 작성을 시작할 수 있습니다.

지금 설치할 라이브러리는 react-native-gesture-handler, react-native-reanimated, react-native-screens, react-native-safe-area-context 및 @react-native-community/masked-view입니다.
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
종속성을 설치한 후 package.json 파일은 버전을 제외하고 다음과 같아야 합니다. 시간이 지남에 따라 업데이트될 가능성이 높기 때문입니다.

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.2.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-reanimated": "^1.13.0",
    "react-native-safe-area-context": "^3.1.7",
    "react-native-screens": "^2.10.1",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

프로젝트의 폴더 구조는 img에 표시됩니다.

이제 코딩할 시간

1 단계:

3개의 파일 stack1.js, Stack2.js 및 Settings.js를 포함하는 screen이라는 폴더 이름을 만듭니다.

screens/Stack1.js

import React from 'react'
import { View, Text, StyleSheet, Button } from 'react-native'

export default function Stack1(props) {
    return (
        <View style={styles.container}>
            <Text>Stack Screen 1</Text>
         </View>
    )
}

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

screens/Stack2.js

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

export default function Stack2() {
    return (
        <View style={styles.container}>
            <Text>Stack2</Text>
        </View>
    )
}

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

Settings.js

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

export default function Settings() {
    return (
        <View style={styles.container}>
            <Text>Settings</Text>
        </View>
    )
}

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

2 단계:

이제 App.js에서 패키지 이름 @react-navigation/stack을 사용하여 첫 번째 스택 탐색기를 만듭니다.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Stack1 from './screens/Stack1';
import Stack2 from './screens/Stack2';

const Stack = createStackNavigator();

function StackScreens(){
  return(
    <Stack.Navigator screenOptions={{
      headerTitleAlign:'center',
      headerTintColor:'#fff',
      headerStyle:{
        backgroundColor:'blue'
      }
    }}>
      <Stack.Screen name="Stack1" component={Stack1} />
      <Stack.Screen name="Stack2" component={Stack2} />
    </Stack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
        <StackScreens />
    </NavigationContainer>
  );
}

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

createStackNavigator는 Screen과 Navigator의 2가지 속성을 포함하는 객체를 반환하는 함수입니다. 이를 사용하여 Stack1과 Stack2라는 이름의 두 화면을 만들었습니다.

NavigationContainer는 탐색 트리를 관리하고 탐색 상태를 포함하는 구성 요소입니다. 이 구성 요소는 모든 네비게이터 구조를 래핑해야 합니다.

위 코드의 출력

이제 Stack1.js에 몇 줄의 코드를 추가하여 Stack2 화면으로 이동합니다.

screens/stack1.js

.....
  return (
        <view style={styles.container}>
            <Text>Stack Screen 1</Text>
            <Button title="Go to Stack Screen 2" onPress={() => props.navigation.navigate('Stack2')} />
        </View>
    )
.......

버튼을 추가하면 Stack2.js라는 화면으로 이동할 수 있습니다.

이렇게 스택 탐색이 완료되었습니다. 이제 탭 탐색을 만듭니다.

3단계:

탭 탐색을 생성하려면 @react-navigation/bottom-tabs라는 패키지 이름이 필요합니다.
그리고 App.js에서 변경 사항을 수행합니다.

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

import Stack1 from './screens/Stack1';
import Stack2 from './screens/Stack2';
import Settings from './screens/Settings';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function StackScreens(){
  return(
    <Stack.Navigator screenOptions={{
      headerTitleAlign:'center',
      headerTintColor:'#fff',
      headerStyle:{
        backgroundColor:'blue'
      }
    }}>
      <Stack.Screen name="Stack1" component={Stack1} />
      <Stack.Screen name="Stack2" component={Stack2} />
    </Stack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={32} color={color} />;
            // return <Ionicons name= size={32} color= />

          },
        })}
      >
        <Tab.Screen  name="Home" component={StackScreens} />
        <Tab.Screen  name="Settings" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

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

위의 코드에서 탭 탐색의 사용은 스택 탐색과 훨씬 더 유사합니다. 우리는 화면 옵션을 사용하고 다른 구성 요소를 사용했습니다.
이제 내비게이션이 준비되었습니다.

GitHub

github에서 코드를 찾을 수 있습니다.
⭐ 저장소 수행