React-Native启动页

本文将从 Android 和 IOS 两端分别详细介绍APP是如何设置名称、图标以及启动页的。

首先我们到图标工厂上传一张 1024x1024 的图标，然后一键生成所有尺寸的图标，下载下来供两端使用。

IOS端

设置名称

在 Xcode 中点击你的项目修改右侧 Display Name 就是APP的名称

设置图标

将上面下载好的图标组文件夹打开，将 ios 目录下的 AppIcon.appiconset 整个拖入到项目的 ios/rn(工程名)/Images.xcassets 目录下替换原有文件。

回到 Xcode 中就可以看到所有尺寸的图标都已设置成功

重新运行项目就可以看到图标了。

如果重新运行项目图标依然不生效，请确认 Copy Bundle Resources 中是否有 Images.xcassets

设置启动页

首先安装react-native-splash-screen

yarn add react-native-splash-screen

然后进入 ios 目录执行 pod install

用Xcode打开工程，在 AppDelegate.m 文件中导入 RNSplashScreen.h文件，并添加显示代码。

#import "RNSplashScreen.h" // 导入

[RNSplashScreen show]; // 显示启动屏

然后新建一个启动图容器

image.png

同样的还是去图标工厂制作启动图

image.png

将下载好的启动图文件夹里 ios 目录下的 LaunchImage.launchimage 拖入到 ios/rn(工程名)/Images.xcassets 里替换原有文件。

image.png

然后查看 App Icons and Launch Images 项

image.png

我们需要将 Launch Screen File 置空，这样就不会走默认的 LaunchScreen.storyboard 了

所以我们需要在 Build Settings 中搜索 Asset Catalog Launch Image Set Name 然后创建启动页名字

image.png

然后在 info 中修改 Launch screen interface file base name为 LaunchImage

image.png

后面的 Value 改为 LaunchImage

image.png

最后在RN中的首页中设置多长时间后关闭启动图

import React from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';
import SplashScreen from 'react-native-splash-screen';

export default class Home extends React.Component {
  componentDidMount() {
    setTimeout(() => {
      SplashScreen.hide();
    }, 3000);
  }
  render() {
    return (
      <View style={styles.content}>
        <Text style={
   
   {fontFamily: 'FZSJ-LIANGWZDQS'}}>
          智者一切求自己，愚者一切求他人。
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

重启可看到效果

LaunchImage.png

Android端

设置名称

修改 android/app/src/main/res/values/strings.xml 文件

<resources>
    <string name="app_name">自动驾驶</string>
</resources>

设置图标

将上面下载好的图标组文件夹打开，将 android 目录下的6个文件夹拖入到 android/app/src/main/res 目录下替换。并将 android/app/src/main/AndroidManifest.xml 文件的 icon 和 roundIcon 都改为图标的名称

image.png

重新编译并运行可以看到效果

设置启动页

将下载好的启动图文件夹里 android 目录下的6个文件夹拖入到 android/app/src/main/res目录里。

image.png

在 android/settings.gradle 文件中加入这两行代码

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

image.png

然后在 android/app/build.gradle 文件中引入 react-native-splash-screen

implementation project(':react-native-splash-screen')

image.png

然后在 android/app/src/main/java/com.rn(项目名)/MainActivity.java 文件中引入安卓包

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;

@Override
protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this);  // 显示
  super.onCreate(savedInstanceState);
}

image.png

在 android/app/src/main/java/com.rn(项目名)/MainApplication.java 文件中引入

 import org.devio.rn.splashscreen.SplashScreenReactPackage;

image.png

在 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/screen">
</LinearLayout>

在 android/app/src/main/res/values 文件夹下创建 color.xml 文件

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

在 android/app/src/main/res/values/styles.xml 文件中添加

<!--设置透明背景-->
<item name="android:windowIsTranslucent">true</item>

image.png

重新编译可看到效果

作者：无穷369
链接：https://www.jianshu.com/p/ce7ee8efd42c

猜你喜欢