react native开发Android 篇——APP名称、图标、启动页

设置APP名称

编辑 android/app/src/main/res/values/strings.xml 文件：

<resources>
    <string name="app_name">倒数日</string>
</resources>

设置APP图标

使用图标工场处理图片，拿到各个尺寸的图标，替换 android/app/src/main/res 下对应的图标。

图标工场处理过的图标：

要替换的图标：

设置启动页

添加启动页可以使用 react-native-splash-screen 库，通过它可以控制启动页的显示和隐藏。
安装

yarn add react-native-splash-screen/npm install react-native-splash-screen --save
react-native link react-native-splash-screen

编辑 android/app/src/main/java/com/daysmatter(自己的项目名称)/MainActivity.java，添加显示启动页的代码：

// 启动页设置添加代码
import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 这里定义了在加载js的时候，同时弹起启动屏
        // 第二个参数true，是启动页全屏显示，隐藏了状态栏。
        SplashScreen.show(this, true);
    }
    ...其他代码
}

在 android/app/src/main/res/layout 文件夹下创建启动页布局文件 launch_screen.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/gradient_test"
    android:gravity="center">
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="倒数日"
            android:textSize="60sp"
            android:textStyle="bold"
            android:textColor="@color/StartTitle"
            
        />
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="记住每个重要时刻"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_marginTop="30dp"
            android:textColor="@color/StartSubtitle"
        />
</LinearLayout>

绘制背景色渐变：新建android/app/src/main/res/drawable/gradient_test.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="270"
        android:endColor="#00A6FE"
        android:centerColor="#eeeeee"
        android:startColor="#02D7FF" />
</shape>

解决短暂白屏可以将背景设置为透明，编辑android/app/src/main/res/values/styles.xml即可。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

隐藏启动页

编辑App.js文件，在componentDidMount中关闭启动页

componentDidMount() {
  // 组件加载完毕之后，隐藏启动页
    this.timer = setTimeout(() => {
      SplashScreen.hide();
    }, 900)
}
//卸载计时器
componentWillUnmount() {
  this.timer && clearTimeout(this.timer);//同时为真的才执行卸载
}