React Native设置app名称、图标、启动项

本人小白一枚，最近公司要用react native，就趁此机会研究一下，顺便用简书记录一下，第一篇文章主要来记录一下如何设置React Native 中设置 APP 名称、图标和启动页，不足之处，感谢 大家指出。以下操作暂时只针对android。

设置app名称

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

<resources>
    -<string name="app_name">AwesomeProject</string>
    +<string name="app_name">豆瓣</string>
</resources>

修改应用图标

应用图标对尺寸有要求，比较简单地方式是准备一张 1024*1024 的图片，然后使用图标工厂在线生成。生成后直接替换掉android/app/src/main/res下目录文件即刻；

image

设置启动页

React Ntive启动默认会有个白屏，可以下载react-native-splash-screen 库解决，具体如下：
1.下载react-native-splash-screen并关联

yarn add react-native-splash-screen --save
react-native link react-native-splash-screen

2.修改android/app/src/main/java/com/项目名/MainActivity.java文件：

package com.awesomeproject;
import com.facebook.react.ReactActivity;
import android.os.Bundle; // here
import org.devio.rn.splashscreen.SplashScreen; // here
public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "AwesomeProject";
    }
    //添加以下全部代码
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       SplashScreen.show(this);  
       super.onCreate(savedInstanceState);
   }
}

3. 添加 launch_screen.xml
   android/app/src/main/res目录下面新建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/launch_screen">
</LinearLayout>

4. 添加启动图片
   在 app/src/main/res/下新建以下文件夹：
   ·drawable-ldpi
   ·drawable-mdpi
   ·drawable-hdpi
   ·drawable-xhdpi
   ·drawable-xxhdpi
   ·drawable-xxxhdpi
   并分别在以上目录添加一张launch_screen.png图片，安卓会自动会自适应缩放。
5. 设置colors.xml文件
   在android/app/src/main/res/values目录下新建colors.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

6.设置启动页透明背景
修改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>

7.根据项目需求隐藏启动页
在app.js下
import SplashScreen from 'react-native-splash-screen';
componentDidMount() {
setTimeout(()=>{
SplashScreen.hide(); // 隐藏启动屏
},3000)

总结，

写到这里app的标题，图标，启动页都已设置完毕，大家可以进行正式的逻辑代码，下一节将记录配置react-navigation流程。