本人小白一枚，最近公司要用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);
}
}
- 添加 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>
- 添加启动图片
在 app/src/main/res/下新建以下文件夹：
·drawable-ldpi
·drawable-mdpi
·drawable-hdpi
·drawable-xhdpi
·drawable-xxhdpi
·drawable-xxxhdpi
并分别在以上目录添加一张launch_screen.png图片，安卓会自动会自适应缩放。 - 设置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流程。
网友评论