【React Native】react-native-navigation導入 for Android

1.インストール

"react-native link"を行うと、ネイティブに関わる修正を自動行う
しかし、一部手動で設定する必要がある。
自動で設定される手順:＊自動＊
手動で設定する手順　:＊手動＊
＊自動で設定される手順もバージョンによってされない可能性があるので、
設定されているか確認する必要がある。

npm i -save react-native-navigation@latest
react-native link

2.settings.gradleの修正

パス：android/settings.gradle
＊自動＊
下記を追記

 include ':react-native-navigation'
 project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')

3.build.gradleの修正

パス：android/app/build.gradle
＊手動＊
バージョンの修正

android {
     compileSdkVersion 25
     buildToolsVersion "25.0.1"
     ...
 }

＊自動＊

下記を追記

 dependencies {
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"
     compile project(':react-native-navigation')
 }

4.MainActivity.javaの修正

パス：android/app/src/main/java/com/yourproject/MainActivity.java
＊手動＊
置き換える
修正前

package com.reactnativeapp;

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 "reactNativeApp";
    }
}

修正後

package com.reactnativeapp;

import com.reactnativenavigation.controllers.SplashActivity;

public class MainActivity extends SplashActivity {

}

5.MainApplication.javaを修正

パス：android/app/src/main/java/com/yourproject/MainApplication.java
＊手動＊
一部置き換える
修正前

package com.reactnativeapp;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.reactnativenavigation.NavigationReactPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new NavigationReactPackage(),
            new VectorIconsPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

修正後

package com.reactnativeapp;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.reactnativenavigation.NavigationApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends NavigationApplication {

    @Override
     public boolean isDebug() {
         // Make sure you are using BuildConfig from your own application
         return BuildConfig.DEBUG;
     }

     protected List<ReactPackage> getPackages() {
         // Add additional packages you require here
         // No need to add RnnPackage and MainReactPackage
         return Arrays.<ReactPackage>asList(
             // eg. new VectorIconsPackage()
         );
     }

     @Override
     public List<ReactPackage> createAdditionalReactPackages() {
         return getPackages();
     }
}

6.AndroidManifest.xmlの確認

パス：android/app/src/main/AndroidManifest.xml
＊自動＊

android:name=".MainApplication"

参考