Splash Screen to a React Native App

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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:

方法一:

clipboard.png
可以看到預設的IOS啟動時預設的splash screen是用的LaunchScreen.xib中繪製的圖片來作為該APP的啟動頁(運用LaunchScreen.xib可以自己繪製APP啟動頁)

clipboard.png

方法二:

刪除LaunchScreen.xib檔案,“Launch Images Source” and click “Use Asset Catalog…”, 刪除Launch Screen Files中選擇的LaunchScreen
clipboard.png

clipboard.png

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>

相關文章

IOS開發 最新文章