反応ネイティブパッケージAPK、アプリのアイコンを変更し、名前、ページを開始

ネイティブのAPKパッケージを反応させます

必要な環境をインストールします。
まず、Java環境のインストール
1、ダウンロードしてhttps://www.oracle.com/technetwork/java/javase/downloads/index.html公式サイトを（ない最新バージョンをダウンロードするために）
2を、設定する環境変数
（1）新- >変数名「JAVA_HOME」、変数値が「C：\ Javaの\ jdk1.8.0_05」（つまり、JDKのインストール）
（2）編集-変数プラスの元の額面の末尾に>変数名「パス」、「; ％JAVA_HOME％\ binに;％JAVA_HOME％\ JRE \ binに"
3、環境が正常に設定されていることを確認し
、それぞれのJavaコンソールでcmdと入力します。javacの、Javaの-versionコマンド

第二に、インストールは、Android SDKを
。1、https://www.androiddevtools.cn/ダウンロードしてインストール
SDKを取り付け、2を

第三に、インストール反応し、ネイティブ環境

$  npm install -g react-native-cli
$  react-native init firstRN   //创建react-native项目，firstRN为项目名，项目名称可随意取

第四に、APK荷造りを始める
署名鍵を生成し、1

Java環境JDKのbinディレクトリを入力し、秘密鍵を生成するためにkeytoolコマンドを使用します
：（\プログラムファイル\のJava \ Cなど、jdkx.x.x_xビン\）以下のコマンドを実行します

（1）アンドロイド反応ネイティブプロジェクトディレクトリ/ appフォルダに生成された私の解放-key.keystoreファイルに直接このコマンドを使用し、このコマンドは、以下のステップ2を動作させずに実行されます

$ keytool -genkey -v -keystore react-native项目绝对路径/android/app/my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

例如：keytool -genkey -v -keystore E:\TSBrowserDownloads\tworn\android\app\my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

（2）次のステップを実行する必要性を作成するには、このコマンドを使用して、2

$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

注意：Java環境がCドライブにインストールした場合は、このコマンドを実行するCMD管理者として実行する必要性を入力してください。JavaのCドライブにインストールされていないが必要とされていません。このコマンドを実行した後、
パスワードのストア（ストア）と対応するキーを入力するように求められますし、問題に関連する情報について設定します。最後に、それはbinにディレクトリを生成します。
私の解放-key.keystore鍵データベース・ファイル、キーカレーが10,000日間有効の別々のキーを生成している必要があります。

アンドロイド/ appフォルダのプロジェクトディレクトリにコピーします2.私のリリース - key.keystoreファイル

3、（プロジェクト構成、唯一の効果的なプロジェクト）のAndroidまたはプロジェクトディレクトリ/ .gradle / gradle.properties（すべての項目に対して有効なグローバル設定）の下にプロジェクトディレクトリの/android/gradle.propertiesを編集します
。あなたはgradle.propertiesは、あなたがあなた自身を作成し提出していない場合は、次のコードを追加します（コマンド****を設定するための最初のステップであるパスワードを注意してください）

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore 
MYAPP_RELEASE_KEY_ALIAS=my-key-alias 
MYAPP_RELEASE_STORE_PASSWORD=*****   
MYAPP_RELEASE_KEY_PASSWORD=*****

注意：それ以外の場合は失敗包装、スペースの前と後にパスワードをチェックしないでください。

4、編集プロジェクトディレクトリ/アプリ/ build.gradleファイルの下のアンドロイドは、次のシグネチャの設定を追加します（...修正部なしでオリジナルを維持するために）

... 
android { 
    ... 
    defaultConfig { ... } 
    signingConfigs { 
         release { 
              storeFile file(MYAPP_RELEASE_STORE_FILE)
              storePassword MYAPP_RELEASE_STORE_PASSWORD 
              keyAlias MYAPP_RELEASE_KEY_ALIAS 
              keyPassword MYAPP_RELEASE_KEY_PASSWORD 
         } 
     } 
     buildTypes { 
         release { 
              ...
              signingConfig signingConfigs.release
          }
      }
 } 
...

5、アンドロイドファイルの下に新しいファイルlocal.propertiesは、このファイルにコンテンツを追加しsdk.dir = C：\ SDK（インストールディレクトリのSDKのパス）

注：あなたがlocal.propertiesファイルを持っている場合は、新しい、sdk.dir = Cを作成する必要はありません：\ SDKのファイルが存在している必要があります

6、アプリ名を変更

入力：アンドロイド/アプリ/ srcに/メイン/ RES / valuse /ディレクトリのstrings.xml

<resources>
    <string name="app_name">你的APP名称</string>
</resources>

7、アプリのアイコンを変更します

入力：アンドロイド/アプリ/ srcに/メイン/ resを/ディレクトリ、同様のミップマップ-hdpi、ミップマップ - MDPI、ミップマップ-xhdpi、ミップマップ-xxhdpi、ミップマップ-xxxhdpi

そして、他の文書は、これらのファイル形式をPNG形式が写真で、画像サイズは以下のとおりです。72x72,48x48,96x96,144x144,192x192フォーマット

注：元の画像はPNG形式である必要があり、そうでない場合はエラーを

8、アプリのスタートページを変更

ステップ1：プラグインのダウンロードをインストールします

1、npm i react-native-splash-screen --save
2、react-native link react-native-splash-screen  // 自动链接了，就不用手动配置了

3、設定されたパス以下、自動的にアンドロイド/ settings.gradle次の文文書に上記の2つのコマンドを実行した後に
「... \ node_modules \ RN-スプラッシュでアンドロイド\ -screen」ダブルスラッシュには、単一のスラッシュを表し。

include ':rn-splash-screen'
project(':rn-splash-screen').projectDir = new File(rootProject.projectDir, '..\\node_modules\\rn-splash-screen\\android')

ステップ2：Android上で設定を行います

1、アンドロイド/アプリ/ srcに/メイン/ javaの/ COM / XXX / MainActivity.javaファイルに示すコードを追加します

package xxxx;
import android.os.Bundle;                            //  添加  第一处
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;       // 添加  第二处
 
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 void onCreate(Bundle savedInstanceState) {      // 添加  第三处
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }                                                        //第三处
    @Override
    protected String getMainComponentName() {
        return "xxx";
    }
}

2、アンドロイド/アプリ/ srcに/メイン/ resを用ディレクトリ、レイアウトディレクトリに新しいディレクトリ・レイアウト、launch_screen.xmlファイルを作成し、
（画像名を開始するにはlaunch_screen）以下をコピー

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>

3、アンドロイド/アプリ/ srcに/メイン/の解像度のディレクトリ、スタートアップページの絵を置くための新しい描画可能xhdpiと描画可能xxhdpiディレクトリ、
launch_screen.png命名

4、リアクト - ネイティブプロジェクト/App.jsファイル手段は2S起動ページの後に閉じて追加されたメインエントランスリアクトネイティブプロジェクトファイルを開くアプリのホーム・ページを入力してください

import SplashScreen from 'react-native-splash-screen';
export default class App extends Component<Props> {    
    componentDidMount() {                   //只需添加componentDidMount(){}就行
        setTimeout(() => {
            SplashScreen.hide();      //关闭启动屏幕
        }, 2000);
    }
	componentWillUnmount() {
    this.timer && clearTimeout(this.timer);         //清除计时器
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

第三段階：設定が完了し、通常の表示ページを開始

9、AndroidのCDディレクトリ実行するために、端末

$  gradlew assembleRelease

注：MacOSのシステムおよびLinuxシステムでコマンド$ ./gradlewのassembleReleaseを使用します

10は、ウェイト端子表示BUILD SUCCESSFULの後に行きました。

成功は、Androidプロジェクトに横たわっていただけのAPKパッケージを築く表示/アプリ/ビルド/出力/ APK /解放の下で

注：プロジェクトの前にしてこのパッケージには、エラーが包装工程で発生した場合、再パッケージをアンドロイド/アプリのファイルのビルドディレクトリを削除してください。

反応ネイティブパッケージAPK、アプリのアイコンを変更し、名前、ページを開始

ネイティブのAPKパッケージを反応させます

おすすめ