RN集積元Androidアプリケーション

9699 ワード
and roid
1.ディレクトリ構造の設定
空きディレクトリを作成してReact Nativeプロジェクトを保存し、/androidサブディレクトリを作成し、既存のAndroidプロジェクトを/androidサブディレクトリにコピーします.
2.javascript依存パッケージのインストール
項目のルートディレクトリの下にpackage.jsonという空のテキストファイルを作成し、次の内容を記入します.
{  「name」:「rntestthree」、  「version」:「0.0.1」、  「prvate」:true、  「スクリプト」:{    「start」:「node nodemoodules/react-native/local-cli/cli.js start」  },   「dependencies」:{    「react」:「16.8.3」、    「react-native」:「^0.599」  } } scriptsは、packagerサービスを開始するためのコマンドです.dependenciesのreactおよびreact-nativeのバージョンは、あなたの具体的なニーズに依存します.一般的には最新のバージョンを推奨します.npm info reactおよびnpm info react-nativeを使用して、現在の最新バージョンを見ることができます.また、react-nativeは、reactのバージョンに対して厳しい要求があります.どの範囲よりも低いか?したがって、本明細書では、すべてのreact nativeおよび対応するreactバージョンの要求をリストすることができない.npm installを実行しようとしても、最初に読者に注意してください.そして、インストール中のエラーメッセージ、例えばrequire react@ . . , but none was installedを観察して、このようなヒントに従ってnpm i -S react@ . . を実行します.複数の第三者依存を使用すると、これらの第三者がそれぞれ要求するreactバージョンがあります.競合する場合は、react-nativeに必要なreactバージョンを優先的に満たすべきであり、他の第三者が使用できる場合は、使用できない場合は他のライブラリを選択することしか考えられない.
次にnpmを使ってReactとReact Nativeモジュールをインストールします.一つの端末/コマンドプロンプトを開いて、プロジェクトディレクトリに入ります.次のコマンドを実行してインストールします.
$npm install
これらのモジュールは、プロジェクトのルートディレクトリの下のnode_modules/ディレクトリにインストールされます.
3.React Nativeプロジェクトをあなたのアプリケーションに追加します.
3.1 あなたのアプリにbuild.gradleファイルにReact Native依存性を追加します.
dependencies｛…comple“comp.facebook.react:react-native:+”//From nodemumodules.｝
特定のReact Nativeバージョンを指定するなら、+を具体的なバージョン番号で置き換えることができます.もちろん、npmからダウンロードしたのはこのバージョンです.
プロジェクトのbuild.gradleファイルにReact Nativeのために、maven依存のエントリを追加します.「allproject」コードブロックに書かなければなりません.
allproject｛repositoris｝is installed from npm url'$rootDir/./nodemumodules/react-naive/android｝
3.2  いくつかのプラットフォームから発生したエラーをブロックします.
appのbuild.gradleにおけるdefault Config配置
        ndk{            abi Filters「armeabi-v 7 a」「x 86」        }
いくつかのSDKバージョンでもエラーが発生する可能性があります.minSdk Version 16以上
android {
    compileSdkVersion 28

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.example.wind.my_react_app"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }

    }
    packagingOptions {
        exclude "lib/arm64-v8a/librealm-jni.so"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    compile "com.facebook.react:react-native:+"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}
3.2設定権限:
次に、AndroidManifest.xmlリストファイルでネットワーク権限を宣言する.DevSettingsActivityインターフェース(開発者メニュー)にアクセスする必要がある場合は、AndroidManifest.xmlにおいても宣言が必要である.
4.コード統合:
4.1 React Nativeコンポーネントindex.jsファイルを作成します.
まず、プロジェクトルートディレクトリに空のindex.jsファイルを作成します.(0.49バージョンの前にindex.android.jsファイルです.)index.jsはReact NativeアプリケーションのAndroid上の入口ファイルであり、不可欠です.とても簡単なファイルでもいいです.一行require/importだけが語句を導入してもいいです.本教程では、簡単な例を示すために、全部のコードをindex.jsに書いています.
import React from "react";
import { AppRegistry, StyleSheet, Text, View } from "react-native";

class HelloWorld extends React.Component {
  render() {
    return (
      
        Hello, World
      
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  },
  hello: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

AppRegistry.registerComponent("MyReactNativeApp", () => HelloWorld);
4.2 RNを実行する生activityを配置する
また、React Nativeの実行時環境を起動してレンダリングを開始するために、いくつかの原コードを追加したいです.まず、ActivityにReactRootViewオブジェクトを作成し、このオブジェクトの中でReact Nativeアプリケーションを起動し、インタフェースのメインビューとして設定します.
Android 5.0以下のシステムで動作したいなら、com.android.support:appcompatのパケットのAppCompatActivityをActivityの代わりに使ってください.
import android.content.Context;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    public static void start(Context context) {
        context.startActivity(new Intent(context, MyReactActivity.class));
    }

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

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        //      MyReactNativeApp    “index.js”  
        // “AppRegistry.registerComponent()”      
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}
Android Studioを使用すれば、Alt + Enterのショートカットキーを使って、自動的にMyReact Activity類のために欠落したimport文を補ってもいいです.BuildConfigは自分のカバンの中で自動的に生成されるべきです.追加の導入は必要ありません.com.facebook...のカバンから絶対に導入しないでください.MyReactActivityのテーマをTheme.AppCompat.Light.NoActionBarに設定したいです.このテーマを使用しているコンポーネントが多いからです.
5.集積結果をテストする
5.1開発サーバを起動する:
アプリケーションを実行するには、まず開発サーバを起動する必要があります.プロジェクトのルートディレクトリで以下のコマンドを実行すればいいです.
$npm start
もしPackagerサーバが起動に成功したら、http://localhost:8081/index.android.bundle?platform=android
次のような情報が見られます.
var __DEV__=true,__BUNDLE_START_TIME__=this.nativePerformanceNow?nativePerformanceNow():Date.now(),process=this.process||{};process.env=process.env||{};process.env.NODE_ENV="development";
(function (global) {
  "use strict";

  global.__r = metroRequire;
  global.__d = define;
  global.__c = clear;
  global.__registerSegment = registerSegment;
  var modules = clear();
  var EMPTY = {};
  var _ref = {},
      hasOwnProperty = _ref.hasOwnProperty;

  function clear() {
    modules = Object.create(null);
    return modules;
  }

  if (__DEV__) {
    var verboseNamesToModuleIds = Object.create(null);
    var initializingModuleIds = [];
  }
エラーメッセージが発生します.
パッケージサーバをリセットできます.
adb reverse tcp:8081 tcp:8081
npm start
 
5.2運転アプリケーション:
packagerを維持しているウィンドウの運転を停止しないでください.Androidアプリケーションを通常のようにコンパイルして実行します.
Android Studioを使ってコンパイルして実行すると、packagerがエラーで終了する可能性があります.この場合は、watch manをインストールする必要があります.しかし、Watch manは現在安定したWindowsバージョンがありませんので、Windowsの下ではこのような崩壊状況はしばらくは特に良い解決策がありません.
コンパイルがすべて順調に行われた後、MyReactActivityに入るとすぐにpackagerからJavaScriptコードを読み出して実行して表示することができるはずです.
javascriptメモの整理(配列対象)
GoLand(三)データタイプ、変数と定数