Splash Screen to a React Native App - HelloWorld开发者社区

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:

方法一：

Splash Screen to a React Native App
可以看到默认的IOS启动时默认的splash screen是用的LaunchScreen.xib中绘制的图片来作为该APP的启动页（运用LaunchScreen.xib可以自己绘制APP启动页）

Splash Screen to a React Native App

方法二：

删除LaunchScreen.xib文件，“Launch Images Source” and click “Use Asset Catalog…”, 删除Launch Screen Files中选择的LaunchScreen
Splash Screen to a React Native App

Splash Screen to a React Native App

image gorilla上生成的不同分辨率的图片文件夹 -> IOS -> Resources -> splash -> 所有图片导入到Images xcassets -> LaunchImage。
启动APP就可以看到splash screen。

Android(Android studio)

open splashScreenDemo/android

方法一：

image gorilla上生成的不同分辨率的图片文件夹 -> Android -> res -> drawable

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

导入到Android/app/res目录下

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>

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>

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();
    }
}

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>