RN集積元Androidアプリケーション
9699 ワード
1.ディレクトリ構造の設定
空きディレクトリを作成してReact Nativeプロジェクトを保存し、
2.javascript依存パッケージのインストール
項目のルートディレクトリの下に
{ 「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」 } }
次にnpmを使ってReactとReact Nativeモジュールをインストールします.一つの端末/コマンドプロンプトを開いて、プロジェクトディレクトリに入ります.次のコマンドを実行してインストールします.
$npm install
これらのモジュールは、プロジェクトのルートディレクトリの下の
3.React Nativeプロジェクトをあなたのアプリケーションに追加します.
3.1 あなたのアプリに
dependencies{…comple“comp.facebook.react:react-native:+”//From nodemumodules.}
特定のReact Nativeバージョンを指定するなら、
プロジェクトの
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以上
次に、
4.コード統合:
4.1 React Nativeコンポーネント
まず、プロジェクトルートディレクトリに空の
また、React Nativeの実行時環境を起動してレンダリングを開始するために、いくつかの原コードを追加したいです.まず、
Android 5.0以下のシステムで動作したいなら、
5.1開発サーバを起動する:
アプリケーションを実行するには、まず開発サーバを起動する必要があります.プロジェクトのルートディレクトリで以下のコマンドを実行すればいいです.
$npm start
もしPackagerサーバが起動に成功したら、http://localhost:8081/index.android.bundle?platform=android
次のような情報が見られます.
パッケージサーバをリセットできます.
adb reverse tcp:8081 tcp:8081
npm start
5.2運転アプリケーション:
packagerを維持しているウィンドウの運転を停止しないでください.Androidアプリケーションを通常のようにコンパイルして実行します.
Android Studioを使ってコンパイルして実行すると、packagerがエラーで終了する可能性があります.この場合は、watch manをインストールする必要があります.しかし、Watch manは現在安定したWindowsバージョンがありませんので、Windowsの下ではこのような崩壊状況はしばらくは特に良い解決策がありません.
コンパイルがすべて順調に行われた後、MyReactActivityに入るとすぐにpackagerからJavaScriptコードを読み出して実行して表示することができるはずです.
空きディレクトリを作成して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コードを読み出して実行して表示することができるはずです.