React Native android Icon和啟動頁
1、Icon
android的圖示的更改還是很簡單的，簡要的說一下
1、在項目根目錄中進入一下路徑：android/app/src/main/AndroidManifest.xml
紅線标注的地方就是icon
icon的分辨率（包含圓角）
分辨率分别為72x72, 48x48, 96x96, 144x144
隻需把下面路徑的圖檔根據分辨率大小換掉就可以了
看下圖路徑，這樣Android的icon就解決了
2、啟動頁
啟動頁相對複雜了一些
**另外需注意你APP根目錄名字有大寫的時候，Java導入包同意寫成小寫**
**例如： APP名字是testTest時，Java導入包寫成testtest**
**package com.testtest;**
2.1 生成自己的啟動頁圖示
推薦一個網址 https://apetools.webprofusion.com 可以生成一整套的圖示
當然也是有缺點的
生成後你會得到如下圖的檔案
當然，你也可以自己做
2.2 把生成的圖示放到指定的位置
android/app/src/main/res/
2.3 編寫引入背景圖檔
首先要在android/app/src/main/res/建立一個檔案夾layout
建立splash_screen.xml檔案
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/screen"> //引入圖檔位址
</LinearLayout>
2.4 編寫樣式
添加以下代碼
路徑: android/app/src/main/res/values/styles.xml
<style name="SplashScreen_Fullscreen" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="windowActionBar">false</item>
//一定要，否則有狀态欄顯示，不能全屏
<item name="windowNoTitle">true</item>
</style>
2.5 啟動頁的顯示和關閉
路徑： android/app/src/main/java/com/APPNAME/module/
若沒有module，建立一個
1、建立SplashScreen類實作顯示與關閉啟動頁的功能
package com.test.module; //test為項目名(注意指定小寫)
import android.app.Activity;
import android.app.Dialog;
import java.lang.ref.WeakReference;
import com.test.R;
public class SplashScreen {
private static Dialog mSplashDialog;
private static WeakReference<Activity> mActivity;
/**
* 打開啟動屏
*/
public static void show(final Activity activity,final boolean fullScreen) {
if (activity == null) return;
mActivity = new WeakReference<Activity>(activity);
activity.runOnUiThread(new Runnable() {
@Override
public void run() {
if (!activity.isFinishing()) {
mSplashDialog = new Dialog(activity, R.style.SplashScreen_Fullscreen);
mSplashDialog.setContentView(R.layout.splash_screen);
mSplashDialog.setCancelable(false);
if (!mSplashDialog.isShowing()) {
mSplashDialog.show();
}
}
}
});
}
/**
* 打開啟動屏
*/
public static void show(final Activity activity) {
show(activity,false);
}
/**
* 關閉啟動屏
*/
public static void hide(Activity activity) {
if (activity == null) activity = mActivity.get();
if (activity == null) return;
activity.runOnUiThread(new Runnable() {
@Override
public void run() {
if (mSplashDialog != null && mSplashDialog.isShowing()) {
mSplashDialog.dismiss();
}
}
});
}
}
2、建立SplashScreenModule類繼承ReactContextBaseJavaModule
package com.test.module; //test為項目名(注意指定小寫)
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
public class SplashScreenModule extends ReactContextBaseJavaModule {
public SplashScreenModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "SplashScreen";
}
/**
* 打開啟動屏
*/
@ReactMethod
public void show() {
SplashScreen.show(getCurrentActivity());
}
/**
* 關閉啟動屏
*/
@ReactMethod
public void hide() {
SplashScreen.hide(getCurrentActivity());
}
}
3、建立SplashScreenReactPackage 并添加 SplashScreenModule執行個體
package com.test.module; //test為項目名(注意指定小寫)
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class SplashScreenReactPackage implements ReactPackage {
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new SplashScreenModule(reactContext));
return modules;
}
}
2.6 在MainActivity中添加啟動時顯示啟動頁
路徑： android/app/src/main/java/com/APPNAME/MainActivity.java
在MainActivity類中添加
如果 Bundle 沒引入被忘了引入
import android.os.Bundle; import com.test.module.SplashScreen; //test項目名(注意指定小寫)
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this,true);
super.onCreate(savedInstanceState);
}
2.7 最後在MainApplication.java中注冊SplashScreenReactPackage
路徑： android/app/src/main/java/com/APPNAME/MainApplication.java
需添加：
import com.test.module.SplashScreenReactPackage; //test項目名(注意指定小寫) @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new SplashScreenReactPackage() //添加 ); }
到這裡就結束了。
從新react-native run-android，應該就能顯示出來了。
最後在APP的啟動頁添加隐藏啟動頁就OK了
import {NativeModules} from 'react-native';
var SplashScreen = NativeModules.SplashScreen;
componentDidMount() {
if (Platform.OS === 'android') {
//安卓通過SplashScreen設定啟動頁
this.timer = setTimeout(
() => {
SplashScreen.hide();
},
500
);
}
}
//最後别忘了解除安裝 定時器
componentWillUnmount(){
this.timer && clearTimeout(this.timer);
}
感謝下面大神的分享
1、React-Native App啟動頁制作(安卓端)
2、react native android應用啟動畫面
3、react-native APP圖示和Splash(Android)
寫在最後：
本人小白，文章是個人測試的，若有不足之處，望批評指正。
拜謝！