Android原生埋め込みReact Native詳細
1.まず統合されたプロジェクトディレクトリ
私は直接react-nativeを使います。 init プロジェクト つまり、私のAndroidプロジェクトのカタログはnode uと同じです。modulesはディレクトリの下にあります。
私たちはinitがプロジェクトを完了した後、プロジェクトの初期化が完了しました。この時は命令react-native run-androidで直接プロジェクトを実行できます。
私たちはどうやって開発して実行していくかを話してください。私たちは主にwebstromを開発して、Androidとiosのコンパイルを分けます。
スタートnpm
ここでは、androidがRN環境に組み込まれているという話をしましょう。
Androidの原生コードを作成して、RNを呼び出します。
package.jsonを作成し、react nativeパッケージを追加します。
コマンドnpm initを使って、手順に従って行けばいいです。
最後にあなたはあなたのRNプロジェクトの中でpackage.jsonを見ることができます。
運行します
注:Java.lang.RuntimeException:Could not get BatdBridge、make sure your bundle is packaged corectlyというエラーが発生する可能性があります。react-native bundle-plotform android-dev false-entry-file index.android.jput React Demo/app/src/mass/index.android.map-asets-dest React Demo/ap/marc/man/res/
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
私は直接react-nativeを使います。 init プロジェクト つまり、私のAndroidプロジェクトのカタログはnode uと同じです。modulesはディレクトリの下にあります。
私たちはinitがプロジェクトを完了した後、プロジェクトの初期化が完了しました。この時は命令react-native run-androidで直接プロジェクトを実行できます。
私たちはどうやって開発して実行していくかを話してください。私たちは主にwebstromを開発して、Androidとiosのコンパイルを分けます。
スタートnpm
ここでは、androidがRN環境に組み込まれているという話をしましょう。
Androidの原生コードを作成して、RNを呼び出します。
package com.reactdemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ReactDemo", null);
setContentView(mReactRootView);
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
}
インターネットなどの権限を持つように注意してください。package.jsonを作成し、react nativeパッケージを追加します。
コマンドnpm initを使って、手順に従って行けばいいです。
最後にあなたはあなたのRNプロジェクトの中でpackage.jsonを見ることができます。
運行します
注:Java.lang.RuntimeException:Could not get BatdBridge、make sure your bundle is packaged corectlyというエラーが発生する可能性があります。react-native bundle-plotform android-dev false-entry-file index.android.jput React Demo/app/src/mass/index.android.map-asets-dest React Demo/ap/marc/man/res/
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。