(二)ReactNative图标、app名称及启动页设置

修改 App 图标

替换项目目录android\app\src\main\res\mipmap-xxx中的图片即可

修改 App 名称

打开项目目录android\app\src\main\res\valuse\strings.xml,修改即可:

<resources>
    <string name="app_name">名称</string>
</resources>

设置启动页

使用rn-splash-screen组件:使用方法:

1、安装 npm i rn-splash-screen --save

2、连接 react-native link rn-splash-screen

3、在 res 文件中新建drawable文件夹,放置splash.png图片

4、修改android/app/src/main/res/values/styles.xml文件,添加一行:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

5.修改android/app/src/main/AndroidManifest.xml文件:

<application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher">
      <activity
        android:name=".MainActivity"
        android:theme="@style/AppTheme"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

6.修改android/app/src/main/java/com/APPNAMES/MainActivity.java文件:

import com.facebook.react.ReactActivity;
import android.graphics.Color;
import android.os.Bundle;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.mehcode.reactnative.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
      // Show the js-controlled splash screen
        SplashScreen.show(this, getReactInstanceManager());
        super.onCreate(savedInstanceState);
    }
}

7.修改项目入口页面

import SplashScreen from 'rn-splash-screen'

// Hide the active splash screen
SplashScreen.hide()

执行react-native run-android启动查看效果