android fc logo,React Native 设置APP名称、logo图标、启动页

APP 开发完成后，我们需要修改 APP 名称并设置好应用图标和启动页，然后再发布上线。其中，名称和图标用于标识 APP，而启动页则可以增强应用程序启动时的用户体验、品牌推广等。本文总结了如何在 React Native 应用中完成名称、图标和启动页的设置。

下面都是关于Android端的操作，IOS的话，看我上面参考资料的链接

1. 修改名称

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

- test

+ 测试程序

2. 修改应用图标

替换 android/app/src/main/res 下对应的图标。

注意：里面有两个图片文件，一个不能少，名字也要相同

推荐使用这个工具只需要拖拽一张图片，就可以迅速生成你需要各种大小的图片 ：https://icon.wuruihong.com/ ，附上这个工具的图片，记得“可选参数”你要微调一下

3. 设置启动页(我参考的资料，有几处，由于react native更新版本，有些问题，我将其改正)

步骤一，

yarn add react-native-splash-screen //不需要手动link，版本高的自动链接

步骤二，编辑android\app\src\main\java\com\ 下面的 MainActivity.java   添加以下代码

import android.os.Bundle; //here

import com.facebook.react.ReactActivity;//react-native-splash-screen >= 0.3.1

import org.devio.rn.splashscreen.SplashScreen; //here

public class MainActivity extends ReactActivity {//...other code

@Override

protectedvoidonCreate(Bundle savedInstanceState) {

SplashScreen.show(this); //here

super.onCreate(savedInstanceState);

}

}

步骤三，在android/app/src/main/res/layout 文件夹下创建启动页布局文件 launch_screen.xml：(layout不存在自己手动创建)

//只需要注意 android:background="@drawable/launch_image"这行， launch_image是你启动图片的名字

步骤四，通过工具制作好不同规格的启动页图片 ，放进 android\app\src\main\res\drawable 文件夹下 (drawable文件夹不存在，则手动创建)

步骤五：成上述操作后，重新打包应用，再启动时就可以看到启动页了。不过，启动页显示之前会有短暂的白屏，我们可以通过设置透明背景来处理。编辑 android/app/src/main/res/values/styles.xml 文件，修改如下：

+ true

步骤六：隐藏启动页

到目前为止，可以发现打开 APP 后会一直停留在启动页面，我们可以在合适的时机(如所有资源准备完毕)调用SplashScreen.hide();来隐藏启动页。

//index.js文件操作

import { AppRegistry } from 'react-native';

import SplashScreen from'react-native-splash-screen';

import App from'./App';

import { name as appName } from'./app.json';

AppRegistry.registerComponent(appName, ()=>{

SplashScreen.hide();returnApp;

});