Splash Screen to a React Native App

icomoon：用於生成不一樣的icon font/svg icon
image gorilla: 用於生成不一樣分辨率的splash screen image

IOS(xcode)

隨着iOS開發發展至今,在UI製做上大概分爲三個流派:

1.使用代碼手寫UI和佈局
2.使用Xib文件來組織UI: xib是一個可視化文件,就像咱們往紙上畫畫同樣,咱們能夠隨意拖動一個UI控件到這張紙上
3.使用StoryBoard故事板: 完整的 iOS app 是由多個供用戶導航的視圖組成的。這些視圖之間的關係由 Storyboard 定義，Storyboard 顯示 app 流的完整視圖。Interface Builder 的 Storyboard 設計器可輕鬆建立和設計新視圖，並將它們連接在一塊兒，造成適用於自定代碼的完整用戶界面。
具體可參考該文章xib,storyboard對比

xcode製做splash screen：

react-native init splashScreenDemo
xcode open splashScreenDemo.xcodeproj:

方法一：

能夠看到默認的IOS啓動時默認的splash screen是用的LaunchScreen.xib中繪製的圖片來做爲該APP的啓動頁（運用LaunchScreen.xib能夠本身繪製APP啓動頁）

方法二：

刪除LaunchScreen.xib文件，「Launch Images Source」 and click 「Use Asset Catalog…」, 刪除Launch Screen Files中選擇的LaunchScreen

image gorilla上生成的不一樣分辨率的圖片文件夾 -> IOS -> Resources -> splash -> 全部圖片導入到Images xcassets -> LaunchImage。
啓動APP就能夠看到splash screen。

Android(Android studio)

open splashScreenDemo/android

方法一：

1. image gorilla上生成的不一樣分辨率的圖片文件夾 -> Android -> res -> drawable

• drawable-hdpi
• drawable-mdpi
• drawable-xhdpi
• drawable-xxhdpi

導入到Android/app/res目錄下

1. android/app/src/main/res create a drawable directory, then create a new Drawable resource file（splash）。

`

<item>
    <bitmap
        android:gravity="fill"
        android:src="@drawable/screen(更名字跟drawable-*下面的圖片name是一致的)"/>
</item>

`

1. add a new style to the android/app/res/values/styles.xml

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>

1. Android/app/java/com.splashscreendemo/ 新建SplashActivity.java

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

1. AndroidManifest.xml中添加new activity 「.SplashActivity」

<activity
            android:name=".SplashActivity"
            android:label="@string/app_name"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

啓動Android APP就會看到splash screen了。

方法二：

npm install react-native-splashscreen --save
react-native-splash-screen製做screen

當圖片須要合成時，則須要本身再去寫樣式
例如：android/app/res/layout/launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/screen">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="95dp"
        android:layout_height="70dp"
        android:src="@drawable/copyright"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="10dp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Powered By: "
        android:textSize="12dp"
        android:textColor="#C0C0C0"
        android:layout_toLeftOf="@id/logo"
        android:layout_alignBottom="@id/logo"
        android:layout_marginBottom="20dp"
        />
</RelativeLayout>