Android開発React Nativeプロジェクトの作成と環境構築

最初にRNDemoの効果を見てみましょう。ここで不満を言わなければなりません。正直なところ、RNは結局のところjsパフォーマンスであり、ネイティブではスムーズではありません。効果を見ると、次のことがわかります。

最初に、NodeJSをインストールする必要があります。これは、React Native（RNと呼びます。後でRNと呼びます）自体がJavaScript言語とReact言語に基づいているためです。後で、すべてのファイルの拡張子が.jsであることがわかります。したがって、ファイルのコンパイルにはNodeJSが必要であり、後で紹介するように、Nodeコマンドを使用してRNプロジェクトを初期化し、必要なすべてのnode_modulesパッケージをダウンロードする必要もあります。さて、ばかげたことはありません。始めましょう。

NodeJSをインストールしている場合はnpmコマンドを使用できますが、そうでない場合はコマンドを見つけることができません。AndroidStudioでRNを使用する方法を最初に紹介します。

1. Android Studioを使用して「RNDemo」などの空のプロジェクトを作成しますが、Androidプロジェクトを作成するときは、次の点に注意する必要があります。現在、最小SDKはAPI16を最低限サポートしているため、ミニAPI16以上で作成することをお勧めします。

2. Androidデモプロジェクトが作成されたら、[ターミナル]をクリックします（ルートディレクトリで実行する必要があることに注意してください）。

次に、次のコードを実行します。

npm init

npm install --save react react-native

注意：

initは主にリマインダーに基づいてpackage.jsonファイルを生成します

install --save react react-native安装React和React Native

次に、ブラウザーでhttps://raw.githubusercontent.com/facebook/react-native/master/.flowconfigを開きます

ファイルをダウンロードして、ルートディレクトリに配置します。

3.構成コンテンツを追加および変更する

1. package.jsonファイルを変更する

2.エントリjsファイルを作成する

3.ビルドファイル構成を追加する

build.gradle（Module：app）追加：

defaultConfig {
       ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

android {
    ...
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:+'
    }
}

compile "com.facebook.react:react-native:+"

build.gradle（Project：Application）追加：

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

4.マニフェストファイル構成：

5.アクティビティはReactActivityを継承し、アプリケーションはReactApplicationを実装します

MyApplicationをマニフェストの名前に追加します。

すべての準備が整ったら、run'App 'を開始し、ターミナルでコマンドreact-native startを入力します。注（実際のマシンの場合は、このtcp：8081 tcp：8081の前にadb reverseを実行して、ポート8081が実際のマシンに接続されていることを確認する必要があります。ポート番号を使用しないでください）

アプリをパッケージ化する必要がある場合は、最初にandroid / app / src / mainの下に新しいアセットディレクトリを作成する必要があります。次に、ターミナルのコマンドラインに次のように入力します。

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

次に、作成したアセットディレクトリに2つのバンドルファイルが生成され、パッケージ化できます。

4.最後に、RNのプログラミング方法

まず、反応言語とJavaScript言語の基本を理解する必要があります。次に、Webstormをインストールするのが最善です。他のソフトウェアも使用できます。ただし、現在Webstormが最も人気があり、使用するのが最適です。すべての基本操作はAndroidStudio開発ツールに似ています。Webstormを使用する方が便利です。また、WebstormはReact Nativeプロジェクトを直接作成でき、AndroidおよびIOSプロジェクトは自動的に作成され、直接使用できます。

ソースコード

Android開発React Nativeプロジェクトの作成と環境構築

おすすめ