Cài đặt và sử dụng React Navigation phần 1

1.React Navigation là gì ?
React Navigation dùng để di chuyển từ màn hình này đến màn hình khác trong ứng dụng
2.Cài đặt:
Mình khuyến khích các bạn setup với yarn vì tốc độ nhanh hơn npm
Cài react-navigation package
Bạn sử dụng 1 trong 2 lệnh setup sau:

yarn add react-navigation
# or with npm
# npm install --save react-navigation

Tiếp theo setup react-native-gesture-handler bạn sử dụng 1 trong 2 lệnh setup sau:

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

Link:

react-native link react-native-gesture-handler

Cuối cùng nếu bạn dùng Android thì bạn phải thêm react-native-gesture-handler vào file MainActivity.java
File MainActivity.java nằm ở trong folder :

D:\ten_project_cua_ban\android\app\src\main\java\com\ten_project_cua_ban\MainActivity.java

File MainActivity.java có nội dung tương tự như sau:

package com.new;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "new";
    }
}

Bạn thêm 3 dòng sau ở dưới dòng import com.facebook.react.ReactActivity;

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

Thêm function sau vào trong class MainActivity:

 @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
       return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }

File MainActivity.java sau khi thêm sẽ như sau:

package com.navi_demo;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "navi_demo";
    }

     @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
       return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

Run project:

react-native run-android

Nếu bạn bị lỗi sau:

FAILURE: Build failed with an exception.
Settings file 'D:\ten_project_cua_ban\android\settings.gradle' line: 3

Cách fix như sau bạn mở file D:\ten_project_cua_ban\android\settings.gradle
Thay dòng 3 dấu \ thành / :

project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')

Thành:

project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

Sau đó run project lại mọi thứ sẽ ok