关于react-native:在React-Native中构建启动屏

首发于公众号 前端混合开发，欢送关注。

在这个教程中，咱们将演示如何在 React Native 中构建一个启动屏幕。咱们将领导你如何应用 react-native-splash-screen 为 iOS 和 Android 利用构建杰出的欢送界面。此外，因为 Expo 很受欢迎，许多人经常抉择应用它，咱们也将探讨如何在 Expo 中构建启动屏幕。

启动画面是用户拜访应用程序其余性能之前呈现的第一个屏幕。能够说，启动画面是让您的挪动利用的品牌名称和图标深刻用户记忆的最佳形式。

在网络应用中，咱们应用预加载器为用户提供动画娱乐，同时服务器操作正在解决中。只管这听起来很间接，但它是构建和保留用户群的要害工具。

在 React Native 中创立启动屏有很多益处。例如，思考一个从 API 加载数据的场景。在用户期待时显示加载器是一种良好的用户体验。同样的状况也实用于启动屏，因为在应用程序启动时立刻显示加载器能够帮忙你在用户期待应用程序准备就绪时，向他们展现一个有组织的，设计良好的显示界面。

对于这个 react-native-splash-screen 演示，咱们将为 Android 和 iOS 构建一个启动屏幕。本教程将领导你如何筹备适合的图片大小，更新必要的文件，并在利用加载时暗藏启动屏幕。实现后的利用将如下图所示

为挪动利用创立启动画面可能会有些辣手，你必定不心愿因为启动画面分辨率的不统一在某些设施上呈现显示问题。例如，安卓设施的需要与 iOS 齐全不同。大多数有教训的设计师能够从零开始为两种设施创立所需的启动画面分辨率。

然而，有许多可用的第三方工具能够帮忙你为 Android 和 iOS 创立启动屏幕。在这个教程中，咱们将应用 App Icon Generator，这是一个用于创立 Android 和 iOS 利用图标和图片的在线平台。

在你持续之前，请确保你有一张高清的，2000×2000 像素（72 PPI）的图片筹备好。你能够在 GitHub 上克隆这些教程的残缺源代码。

首先，返回 Appicon。将你的图片拖到提供的框中，而后抉择 4x 作为你的根底尺寸。勾选 iOS 和 Android，而后点击生成：

接下来，解压下载的文件，并将 iOS 和 Android 文件夹复制到你克隆的启动我的项目的 assets 目录中的 assets 文件夹里：

在 React Native 中构建启动屏须要一些微调。首先，应用上面的任一命令装置 react-native-splash-screen 包：

/* npm */
npm i react-native-splash-screen --save

/* yarn */
yarn add react-native-splash-screen

在你的终端中，应用上面的命令链接依赖项：

cd ios // to enter into IOS directory
pod install

接下来，导航到 AppDelegate.m 文件并用以下代码进行更新。增加代码 #import "RNSplashScreen" （第 6 行），并将默认设置为显示启动屏 [RNSplashScreen show]（第 41 行）。请参考上面代码中的正文：

/* ios/SplashScreen/AppDelegate.m */

#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
// Import RNSplashScreen
#import "RNSplashScreen.h"
#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
static void InitializeFlipper(UIApplication *application) {FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"MySplashScreen"
                                            initialProperties:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  // Set the splash screen to show by default.
  [RNSplashScreen show]; 
  return YES;
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end

在上述代码中，咱们对 AppDeligate 文件做了两个重要的批改。首先，咱们将之前装置的 RNSplashScreen 导入到 AppDeligate.m 中。接下来，咱们用代码 [RNSplashScreen show] 设置 RNSplashScreen 默认显示。

接下来，在 Xcode 中关上我的项目工作区，点击 Images，右键点击 Appicon 下方的任意地位，抉择 New Image Set。将图片名称设置为“splash”，关上 assets 文件夹，导航到 iOS 文件夹。将 iOS 中的三张图片拖到 Xcode 上命名为 1x, 2x 和 3x 的三个框中：

接下来，抉择 LaunchScreen.storyboard。抉择 View Controller Scene > View Controller > View，点击 SplashScreen 和 Powered by React Native 标签，并在键盘上按 Delete 键。

接下来，抉择 View 并点击 Xcode 右上角的尺子图标。勾销选中 Safe Area Layout Guide 选项，点击加号图标 +，在对象搜寻输入框中输出“image view”，而后将“image view”拖到 View 画布上：

当初咱们曾经设置好了图像视图，点击图像属性图标并将图像更改为“splash”。将内容模式设置为“aspect fit”，如下所示：

你可能会问的下一个问题是“我如何在 React Native 中更改启动屏幕的背景色彩？”为了在 iOS 中为启动屏幕强制应用统一的背景，滚动到背景设置地位并从下拉菜单中抉择 Custom。在弹出窗口中，抉择启动屏幕的冀望色彩。在咱们的例子中，咱们抉择了红色：

为了确认你的利用能够胜利运行，请从 Xcode 运行一个构建。你应该会看到相似这样的状况：

对于 Android，导航到 MainActivity.java 文件并更新代码以应用上面的 react-native-splash-screen 代码：

/* android/app/src/main/java/MainActivity.java */

package com.mysplashscreen;
import android.os.Bundle; // Add this here
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // Add this 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 "MySplashScreen";}

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

接下来，在 app/src/main/res/layout 中创立一个名为 launch_screen.xml 的文件。另外，如果 layout 文件夹不存在，也要创立它：

/* launch_screen.xml */

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

留神，<ImageView android:src="@drawable/launch_screen" /> 在 HTML 中等同于 <img src="your_image" />，所以请确保用你的自定义图片的理论名称替换 launch_screen。

然而，Android 会主动缩放可绘制的图像，所以你不肯定须要为不同的手机尺寸提供图片。回忆一下，咱们之前将两个文件夹（Android 和 iOS）复制到了咱们的资产目录。这两个文件夹蕴含了咱们为不同手机密度提供的启动画面图片。

将 Android 目录中的 drawable folders/assets 复制到能够在 android/app/src/main/res/ 中找到的 res 目录中。

要更改 Android 利用的启动屏幕背景色彩，请在 values 文件夹中创立一个名为 colors.xml 的文件，并复制上面的代码：

/* app/src/main/res/values/colors.xml */

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

在上述代码中，咱们正在创立一个主色，这将是咱们首选的背景色。而后，关上 Android Studio 中的 Android 文件夹，关上 AVD，并依照上面的形式运行你的应用程序。如果所有设置正确，你应该会看到相似于这样的后果：

为了在利用加载时暗藏启动屏幕，咱们将应用之前装置的 react-native-splash-screen 包。在你的 App.js 文件中，复制上面的代码：

/* App.js */

import React, {useEffect} from 'react';
import {
  StatusBar,
  StyleSheet,
  SafeAreaView,
  useColorScheme,
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import SplashScreen from 'react-native-splash-screen';
import Login from './src/Login';
function App() {const isDarkMode = useColorScheme() === 'dark';
  const backgroundStyle = {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,};
  useEffect(() => {SplashScreen.hide();
  }, []);
  return (<SafeAreaView style={[styles.container, backgroundStyle]}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <Login />
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {flex: 1,},
});
export default App;

在咱们的 Login.js 文件中：

/* Login.js */

import React, {useState} from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import logo from '../assets/skout_logo.png';
export default function Login() {const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  return (<View style={styles.container}>
      <View style={styles.logoView}>
        <Image source={logo} resizeMode="contain" style={styles.logo} />
      </View>
      <View style={styles.inputView}>
        <TextInput
          value={email}
          style={styles.inputText}
          placeholder="+2340899004909"
          placeholderTextColor="#AFAFAF"
          onChangeText={email => setEmail(email)}
        />
      </View>
      <View style={styles.inputView}>
        <TextInput
          value={password}
          style={styles.inputText}
          placeholder="Password"
          placeholderTextColor="#AFAFAF"
          onChangeText={password => setPassword(password)}
        />
      </View>
      <TouchableOpacity style={styles.loginBtn}>
        <Text style={styles.loginText}>LOGIN</Text>
      </TouchableOpacity>
      <View style={styles.actions}>
        <TouchableOpacity style={{marginHorizontal: 15}}>
          <Text style={styles.forgot}>Forgot Password?</Text>
        </TouchableOpacity>
        <TouchableOpacity>
          <Text style={styles.singUp}>Signup</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    fontWeight: 'bold',
    fontSize: 50,
    color: '#fb5b5a',
    marginBottom: 40,
  },
  inputView: {
    width: '80%',
    backgroundColor: '#EAEAEA',
    borderRadius: 25,
    height: 50,
    marginBottom: 20,
    justifyContent: 'center',
    padding: 20,
  },
  inputText: {
    height: 50,
    color: '#777777',
    fontWeight: '800',
  },
  singUp: {
    color: '#39B54A',
    fontWeight: '500',
  },
  loginBtn: {
    width: '80%',
    backgroundColor: '#39B54A',
    borderRadius: 25,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
    marginBottom: 10,
  },
  loginText: {
    color: '#ffffff',
    fontWeight: '800',
  },
  actions: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
  logoView: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 15,
    marginTop: 0,
  },
  logo: {
    marginBottom: 25,
    width: 250,
    height: 100,
  },
});

利用加载后，程序将显示登录页面。请参考上面的截图：

到目前为止，咱们曾经探讨了如何在一个裸 React Native 利用中构建启动屏幕。应用 Expo，咱们能够以简化和间接的形式做到这一点，因为 Expo 容许咱们在 app.json 文件中配置咱们的启动屏幕和图片。

咱们将应用上述的 App.js 和 Login.js 文件。这就是咱们搭建新我的项目时 app.json 文件的样子：

/* app.json */

{
  "expo": {
    "name": "splash-screen",
    "slug": "splash-screen",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {"supportsTablet": true},
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {"favicon": "./assets/favicon.png"}
  }
}

如果你察看下面代码中的 splash 值（对象），你会看到咱们的启动图像指向咱们的 assets 文件夹，那里有默认的启动图像。咱们能够用咱们的自定义图像替换它。同样，咱们能够调整图像的大小（即 contain、cover、stretch），以更好地适应咱们的屏幕，最初，咱们能够依据咱们的抉择设置背景色彩。

对于咱们的示例，我曾经将图片替换为咱们的自定义图片，而后将背景更改为咱们的款式：

/* app.json */

{
  "expo": {
    ....
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#39B54A"
    },
    ....
}

如你所见，只有咱们的利用加载或准备就绪，启动屏幕就会立刻暗藏。为了优化用户体验，咱们能够抉择在暗藏之前显示启动屏幕几秒钟。为了做到这一点，咱们将应用 expo-splash-screen 包，咱们能够用以下命令来装置：

npx expo install expo-splash-screen

接下来，在咱们的 App.js 文件中，咱们导入并调用它：

/* App.js */

import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();
setTimeout(SplashScreen.hideAsync, 5000);

通过这个，咱们将看到咱们的启动屏幕继续五秒钟后才暗藏。这就是后果：

启动画面是对任何应用程序的重要补充，因为它在启动应用程序和显示次要内容之间发明了平滑的过渡，从而进步了用户的体验。启动画面有助于强化应用程序的身份，使其容易被用户辨认，从而进步品牌建设。

通常，某些配置和资源（如字体和查看更新）会在利用准备就绪时立刻施行。启动屏幕有助于在这些资源加载期间让用户繁忙，而不是提早会侵害用户体验的状况。

首发于公众号大迁世界，欢送关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑难？我来答复

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于react-native:在React-Native中构建启动屏

什么是启动画面？

为什么启动画面的图片大小很重要

构建一个 React Native 启动屏幕

为 iOS 构建一个启动屏幕

更改 iOS 启动屏幕色彩

为 Android 构建启动屏幕

更改 Android 的启动屏幕色彩

在利用加载后暗藏启动屏幕

构建一个 Expo 启动屏幕

总结

交换