反応するネイティブ・スプラッシュ・スクリーンを統合練習（IOS＆アンドロイド）

反応ネイティブ白い画面が起動の瞬間に現れる、白い画面の時間が非常に短くなり、IOS、Androidは比較的長く、おそらく時間を1-3s。これは、作業メカニズム反応し、ネイティブの決定です。反応ネイティブはあなたがjsのメモリにバンドルおよびインタフェースのレンダリングを開始する場合、このインターフェイスは、時間の空のビューでロードされます。
私たちは開始プロジェクト呼ん上記のプロセスは、このプロジェクトの過程で、私たちはより良いを持っているために開始しましたH5とロードが意味あるように、ユーザーフレンドリーな、ユーザーフレンドリーなインターフェイスの代わりに、黒と白、黒と白をした後、すべてではなく、レンダリングするために必要なユーザーエクスペリエンス、あなたは理解することができます。ただし、設定は図のネイティブを開始し、我々は、私たちはほとんどの設定をカプセル化を支援するので、単純な、反応するネイティブ・スプラッシュ・スクリーンの負荷を追加すると、私たちは統合の一部を行う必要があります使用することができ、以下では、構成のチュートリアルです：
まず、ダウンロードしreact-ネイティブ・スプラッシュ・スクリーン：
ターミナルプロジェクトのルートディレクトリの実行で次のコマンドを実行

  yarn  add react-native-splash-screen
    或者
  npm install react-native-splash-screen --save 

新しいライブラリnpm5をインストールする際に特別な注意が存在し、プロジェクト内の結果が正常に機能することはできません他のライブラリの現在の問題を削除します。場所NPM操作で糸を使用してみてください。

第二に、インストール：
コマンドを実行するために実行して、端末が自動的にインストール

react-native link react-native-splash-screen 

第三に、反応し、ネイティブの部分を構成し、インポートが反応し、ネイティブのスプラッシュスクリーンをあなたの家で、中にcomponentDidMountで隠された起動画面を非表示にしません（あなたがそれを非表示にする必要があるとして、当然のことながら、これは、必要がない場合、適切な開催しました）：

 

image.png

第四に、起動時の構成図：

（A）パートのiOS：

1.ディレクトリで開くAppDelegate.mのIOSファイル、インポート開始画面パッケージ。前起動画面を実行するために戻ります。

 

b12.png

2、用Xcode打开ios工程，找到Image.xcassets并点击选中，在空白处选择 App Icons & Launch Images ➜ New ios Launch Image , 完成这步后会生成一个LaunchImage

 

b2.png

3、选中Image.xcassets ➜ LaunchImage，就是上一步创建的LaunchImage，右侧框中的部分是让你选择要支持的系统，横竖屏之类的（这个按照需求选择，如果你的项目不打算支持ios6可以不选择）。然后点击中间部分选中一个分辨率的框，上传相应分辨率的图片作为启动屏幕（注意：这里的分辨率一定要对，如果比例不对传不上去）

以下是选择框中不同屏幕的分辨率：

iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x iPhone Portrait iOS 8-Retina HD 4.7 （750×1334） @2x iPhone Portrait iOS 7,8-2x （640×960） @2x iPhone Portrait iOS 7,8-Retina 4 （640×1136） @2x iPhone Portrait iOS 5,6-1x （320×480） @1x iPhone Portrait iOS 5,6-2x （640×960） @2x iPhone Portrait iOS 5,6-Retina4 （640×1136） @2x 

 

b3.png

4、选中LaunchScreen.xib,会有个弹出框，默认选择确定就行，然后把右边的 Use Launch Screen 取消选中（因为ios可以用来自定义图片启动屏幕或通过 LaunchScreen.xib花一个启动屏幕，ios默认花了一个，因为我们用的是图片所以要取消它）。

 

b10.png

5、如图选中项目工程，右侧会出现工程的基本配置，设置Launch Images Srouce配置为LaunchImage（如果没有LaunchImage会弹出一个框提示拷贝图片，按照默认点确定就行），然后设置Launch Screen File为空（这个很重要）。

 

b4.png

 

6、预览效果（上传后图片被删帧压缩太狠，效果不佳，凑合看把）

 

start0.gif

（二） android部分：

1、打开MainActivity.java按照下图1，2，3步骤添加启动屏包以及方法：

 

b14.png

2、在 android/app/src/mian/res目录下创建layout文件夹，并在创建的layout文件夹中创建launch_screen.xml

launch_screen.xml文件内容如下

<?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、在 android/app/src/mian/res目录下创建drawable-xhdpi文件夹，并添加名为launch_screen.png的图片（其实你要想适配的更全面可以像mipmap一样添加不同分辨率的图片）

 

image.png

4、预览效果

 

an_bf.gif

但是感觉还是优点瑕疵，还是有一瞬间的白屏，这时候需要在android/app/src/main/res/values/styles.xml中添加 <item name="android:windowIsTranslucent">true</item> 设置透明背景

<resources>

<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <!--设置透明背景--> <item name="android:windowIsTranslucent">true</item> </style> </resources> 

接下来看下设置透明背景后的效果

 

an0101.gif

完美收官！