PURE React Native System에서 Navigation을 배워봅시다!!

1장: 루트 설정

반응 네이티브 탐색을 위한 핵심 구성을 설정해 보겠습니다.

1단계: "@react-navigation/native" 설치

먼저 리액트 내비게이션의 핵심 패키지를 설치합니다.

npm install @react-navigation/native

이제 뭐?

2단계: 핵심 유틸리티 패키지 설치

이제 반응 네이티브 탐색을 위한 두 가지 핵심 유틸리티 패키지를 설치합니다. 이들은 "react-native-screens"및 "react-native-safe-area-context"입니다.

(expo이면 expo로 설치하고 없으면 npm으로 설치)

npm install react-native-screens react-native-safe-area-context

이제 순수 반응 네이티브 앱의 경우 "react-native-screens"패키지가 Android 기기에서 제대로 작동하려면 추가 구성 단계가 하나 필요합니다. 활동이 다시 시작될 때 일관되게 유지되지 않는 보기 상태와 관련된 충돌을 방지하려면 이 변경이 필요합니다. 무엇을 어떻게?


(PURE React Native의 경우)
"android/app/src/main/java/{Your_package_name}/MainActivity.java"에 있는 "MainActivity.java"파일을 편집합니다. "MainActivity"클래스의 본문에 다음 코드를 추가합니다.

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

그리고 이 파일의 맨 위에 "import"문을 추가했는지 확인하십시오.

import android.os.Bundle;

3단계: NavigationContainer에서 앱 래핑

마지막으로 앱을 NavigationContainer로 래핑하겠습니다.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './NeiXin/screens/HomeScreen';

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

export default App;

2장: 유틸리티 설정

서랍 및/또는 스택 네비게이터를 설정하는 방법을 알아봅시다.

1단계: 유틸리티 패키지 설치

"react-native-gesture-handler"및 "react-native-reanimated"유틸리티 패키지를 설치해야 합니다. 모든(서랍, 스택 및 탭) 네비게이터에 대해 동일합니다! 설치하자
(expo이면 expo로 설치하고 없으면 npm으로 설치)

npm install react-native-gesture-handler react-native-reanimated

이제 PURE React Native Apps의 경우 다음 줄을 항목 파일의 맨 위에 배치해야 합니다(제게는 App.tsx 파일). 우리는 그것이 맨 위에 있고 그 앞에 다른 것이 없는지 확인해야 합니다.

import 'react-native-gesture-handler';

훌륭합니다. 유틸리티 설정을 완료했습니다. 이제 Navigator에 따라 핵심 패키지를 설치해 보겠습니다. :)

2단계: Reanimated 2 구성

PURE React Native 앱의 경우 "Reanimated 2"관련 오류가 발생할 수 있습니다. 이를 위해 적절하게 구성해야 합니다. 어떻게? 함께 태그하자!

(자세한 내용은 이 항목을 확인하십시오reanimated 2 configuration )


1 부:

babel.config.js에서 이것을 추가하십시오
(참고: 되살아난 플러그인은 마지막에 나열되어야 합니다.)

  module.exports = {
      ...
      presets: [...],
      plugins: [
          ...
          'react-native-reanimated/plugin' //make sure this is always the last line
      ],
  };

2부: 헤르메스 엔진 켜기

"android/app/build.gradle"을 편집하여 Hermes 엔진을 켭니다.

project.ext.react = [
  enableHermes: true  // <- here | clean and rebuild if changing
]

파트 3: MainApplication.java 업데이트

"android/app/main/java/{Your_package_name}/MainApplication.java"를 업데이트합니다.

  import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override //find these four lines, these already exist, we need to add the next 4 lines after these four lines
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override //add these four lines after the above four lines
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage();
      }
    };
  ...

새로운 React Native 프로젝트에 대한 위의 변경 사항 집합을 나타내는 this diff을 참조할 수 있습니다.


파트 4: 실행해 보기

앱을 실행해 보십시오. 여전히 오류가 발생하면 이 명령을 사용하여 캐시를 제거하십시오.

npx react-native start --reset-cache

캐시를 제거하는 앱을 다시 시작합니다. 이제 선택적으로 이 명령을 사용하여 앱을 중지하고 다시 시작할 수 있습니다.

npm run android

도움이 되길 바랍니다 :)

3장: 특정 네비게이터

서랍, 스택 및 탭 네비게이터를 사용하는 방법을 알아봅시다. 이 명령으로 특정 네비게이터를 설치합니다.

(서랍 탐색의 경우)

npm install @react-navigation/drawer

(스택 탐색의 경우)

나는 훨씬 더 커스터마이징이 가능하다고 알려져 있기 때문에 이것을 선호합니다

npm install @react-navigation/stack

[또는]
많은 것을 커스터마이징하는 것은 불가능하거나 불가능하다고해서별로 선호하지 않습니다.

npm install @react-navigation/native-stack

(하단 탭 탐색인 경우)

npm install @react-navigation/bottom-tabs

서랍 탐색

const Drawer = createDrawerNavigator();
function RootDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home Page" component={HomeScreen}/>
      <Drawer.Screen name="About Page" component={AboutScreen}/>
    </Drawer.Navigator>
  )
}

스택 탐색

const Stack = createStackNavigator();
function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home Page" component={HomeScreen}/>
      <Stack.Screen name="About Page" component={AboutScreen}/>
    </Stack.Navigator>
  )
}

하단 탭 탐색

const Tab = createBottomTabNavigator();
function RootBottomTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home Page" component={HomeScreen}/>
      <Tab.Screen name="About Page" component={AboutScreen}/>
    </Tab.Navigator>
  )
}

무엇 향후 계획?

1. Pure React Native를 사용한 비동기 스토리지

2. Pure React Native를 사용한 프로젝트

3. 앱 개발에 대한 추가 정보

4. 플레이스토어에 배포하는 방법

5. JavaScript/TypeScript를 사용한 미친 짓

6. 모든 서버에 대한 자동화된 테스트 작성

7. Expo를 사용하여 NO XP로 Android 앱을 만드는 방법

(apk 생성 포함)

의심의 여지가 있습니까?

의견을 남기거나 Twitter에서 @SilveLEAF로 연락하거나

나에 대해 더 알고 싶어? 여기와!
SilvenLEAF.github.io