react native 项目默认是没有图标，并且启动页面只有文字。这个样子并不能算是一个完整的APP，现在就给APP加一个图标和一个适应所有屏幕尺寸的启动图，并且设置启动图遮住项目启动时候的白色闪屏。

我们先创建一个新项目

react-native init splashExample

图片处理

先从图标开始，一套图标需要各种大大小小的尺寸。 如果没有设计师朋友的话，我们可以用工具批量生成，现在需要一张1024*1024的母版即可。 图片链接 工具链接

上传之后处理之后，会下载得到一个压缩包，解压之后会看到得到了一堆各种尺寸的图标文件。

添加IOS图标

• 用xcode打开IOS项目，把下载好的IOS图标拖到Imagees.xcassets / AppIcon文件夹中，xcode会自动根据图片的大小匹配图标，如果有些图标出现黄色的警告，删掉即可.

这里要小心，别删错了整个目录。

• IOS的图标添加完毕，现在启动项目看看效果了，很简单，已经成功了。

添加android图标

在/splashExample/android/app/src/main/res 目录下 一堆mipmap目录，替换掉以下相应目录中的ic_launcher.png就可以了。

（drawable-hdpi相对mipmap-hdpi，以此类推）

• 启动安卓项目的时候，发现图标已经添加成功，简直不要太简单。

---

整理启动屏图片

• 现在开始添加启动页面，启动页面的操作需要写IOS与安卓的源码，但是也没太复杂，跟着一步步来即可。
• 这里提供了三张不同分辨率，但是和图标一样的启动图，这样用户在点击图标的时候，视觉上感觉是进入了app。

图片1 \ 图片2 \ 图片3

我们先改一下app页面的背景颜色，以及状态栏的颜色，编辑 app.js，整体代码如下

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  StatusBar
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor={'#4f6d7a'}
          barStyle={'light-content'}
        />
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#4f6d7a',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#f5fcff',
  },
  instructions: {
    textAlign: 'center',
    color: '#f5fcff',
    marginBottom: 5,
  },
});

修改好的页面如下

添加IOS启动屏

• 在xcode打开ISO项目，点击LaunchScreen.xib目录，点击VIew组件，删除splashExample 与 Powered by React Native这两个原来就有的文本框。
• 点击右下角有个铜钱样子的图标输入image，会找到一个一个Image VIew，把他拖到View的中间。
• 图片样式点击右上角一个倒三角的图标 Image选项选择Image，Content Mode 选择 Aspet Fit。这里的意思是选择图片的来源以及不拉伸。
• View 的背景颜色选择4f6d7a。

• 选中中间的图片，再点击右上角的小尺子图标，在Autoresizing把四周红线点掉，点亮中间四个箭头。这里的意思是图片根据屏幕自适应大小与位置。

处理白屏闪烁

• 到这里ios的启动页面已经添加完毕，从xcode启动项目检查一下。
• 发现启动页面和进入app中间有一个短暂的白色闪烁，这是因为这个期间bundle.js正在加载。
• 解决方法是让启动页面等bundle.js加载完毕再消失，遮住这个闪烁就好。

这里我们需要添加第三方组件 react-native-splash-screen

这里使用的是3.2.0版，若版本不同，API可能不一致

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

打开xcode编辑 AppDelegate.m， 全部代码如下

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

//引入SplashScreen库
#import "RNSplashScreen.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"splashExample"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  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];
  
  //运行SplashScreen库
  [RNSplashScreen show];
  
  return YES;
}

@end

修改 app.js 添加以下代码

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

export default class App extends Component<Props> {

    componentDidMount() {
        // 组件加载完毕之后，隐藏启动页
        SplashScreen.hide();
    }
}

最后一下状态栏的文字颜色，变成统一的白色。

大功告成

添加安卓启动屏

• 首先需要先把不同尺寸的图片放到资源文件夹。
• splashExample/android/app/src/main/res 目录下有几个mipmap文件夹，根据以下的规则把图片拖进去，然后把文件名统一改成splash.png。

mipmap-mdpi = splash.png
mipmap-hdpi = [email protected]
mipmap-xhdpi = [email protected]
mipmap-xxhdpi = [email protected]

• 在splashExample/android/app/src/main/res文件夹下新建layout文件夹，在layout文件夹中新建launch_screen.xml

• 编辑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="@color/blue"
    android:gravity="center">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@mipmap/splash"
        />
</LinearLayout>

这个页面也就是启动屏。 如果要调整页面填充拉伸之类的，可以在Android Atudio 的Design可视化模式调整。

• 在splashExample/android/app/src/main/res/values文件夹下新建colors.xml，并编辑。
• 到这里定义一个和背景颜色一样的颜色名。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="blue">#4F6D7A</color>
</resources>

• 编辑splashExample/android/app/src/main/res/values/styles.xm文件，增加以下代码。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

这个页面会和启动页一起弹起，并且挡在启动页前面，所以要把这页设成透明。

• 编辑/splashExample/android/app/src/main/java/com/splashexample/MainActivity.java

package com.splashexample;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // 这里定义了在加载js的时候，同时弹起启动屏
        // 第二个参数true，是启动页全屏显示，隐藏了状态栏。
        SplashScreen.show(this, true);
        super.onCreate(savedInstanceState);
    }

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "splashExample";
    }
}

• 从android studio启动项目，也没出现白色闪屏，大功告成。

---

轻松配置react-native热更新

react-native项目有个优势就是可以动态更新bundle.js，从而更新App。

框架选择

• 使用微软出的热更新套件 react-native-code-push
• 框架包括客户端SDK，以及配套的服务端。

服务端配置

• 要使用code push服务，必须在服务端配置好app的信息。
• 安装App Center CLI，用于服务端信息管理。

$ sudo npm install -g appcenter-cli

• 登陆app cetner。

$ appcenter login

• 运行以上命令并在命令行确认后，网页会弹出一个要求登陆的页面，登陆后，会得到一串Access code，复制粘贴回命令行，成功的话会返回登陆账号。

$ appcenter login
Opening your browser... 
? [Visit]:https://appcenter.ms/cli-login?hostname=assetfundeMacBook-Pro.local and enter the code:
? Access code from browser:  0cd185da****36a****7295b3****c8da9ba766a
Logged in as kk412027247

• 添加App信息，这里要分别添加安卓与iOS，我的app名字是splashExample ,以此为例

// -d 后面接的是app显示的名字，为了区分不同平台后面也写上平台命
// -o 表示运行系统（operation） 安卓/iOS
// -p 表示平台（Platform）这里是 react-native
$ appcenter apps create -d splashExample-android -o Android -p React-Native
$ appcenter apps create -d splashExample-ios -o iOS -p React-Native

• 接下来运行一下appcenter apps list检测是否添加成功

  $  appcenter apps list
  kk412027247/splashExample-android
  kk412027247/splashExample-ios

• 将已添加的app部署热更新服务，一般会部署两个用于灰度更新，和正式更新，这里分别叫做Staging与Production。分别给安卓和iOS部署，所以一共要运行四行命令。

建议部署其中一个叫做Staging，命令行一些默认行为会执行这个部署，如果没有这个名称，推送更新到部署的时候，要指定部署的名称，若不指定则会报错。

// -a 是指应用（application），这里要写上“用户名和程序名”

// 部署IOS
$ appcenter codepush deployment add -a kk412027247/splashExample-ios Staging
$ appcenter codepush deployment add -a kk412027247/splashExample-ios Production
// 部署安卓
$ appcenter codepush deployment add -a kk412027247/splashExample-android Staging
$ appcenter codepush deployment add -a kk412027247/splashExample-android Production

• 获取部署码，运行以上命令之后，命令行会返部署码，但是有可能没记下就关掉了命令行
• appcenter codepush deployment list -a <ownerName>/<appName> <deploymentName> -k命令可以查看部署码

$ appcenter codepush deployment list -a kk412027247/splashExample-ios -k

Name	Key
Staging	mgqluuNp1DTWNA5xn_c2YWWyLKGxBJA67O7UN
Production	miDM42DG-ooHvW0VVa0tdPNAgRH2BJJ6j_X8V

$ appcenter codepush deployment list -a kk412027247/splashExample-android -k

Name	Key
Staging	2CFJps8zo4gguRDddWp7POP0psZCrJnAXOQIE
Production	cskcQEjzC5kbOelsPgwA4zaDac6SS1ow0tQIV

运行了一堆命令，最终得到这两组四个部署码，接下来须要将这些部署码按需配置到客户端里面。

---

客户端安装与配置

• 安装依赖包

$ npm install --save react-native-code-push
$ react-native link

运行react-native link的时候，命令行会提示输入部署码What is your CodePush deployment key for Android (hit <ENTER> to ignore) ，这个提示只是第一次输入有效。

• 填写部署码，我这里都是输入Staging的部署码。如果是正式环境，建议写Production的部署码。

  • iOS平台，修改 /splashExample/ios/splashExample/Info.plist 文件,CodePushDeploymentKey 标签的值。
  • 安卓平台，修改 /splashExample/android/app/src/main/java/com/splashexample/MainApplication.java。

• api调用（安静模式）

import CodePush from "react-native-code-push";
// 静默方式，app每次启动的时候，都检测一下更新 'ON_APP_RESUME'
const codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME };
import _App from './App';
// �在组件根节点的地方设置热更新。
const App = CodePush(codePushOptions)(_App);

• 这个安静模式是我最喜欢一种，配置简单，在用户没察觉的情况下就更新了app。在用户打开app的时候，自动下载更新包，下次再启动的时候自动安装更新包。

• api调用（自定义模式），在更新之前可以获取更新包的大小，更新的具体信息，监听下载进度等等。

import CodePush from "react-native-code-push";
...

  state = {receivedBytes : 0, totalBytes : 0, showProcess: false, showIndicator:false};

  _handleUpdate = async () => {
    this.setState({showIndicator: true});

    // checkForUpdate 返回promise，包含了服务端安装包的各种信息，包的大小版本之类的,
    // 如果要构建构建个性化更新界面，需要用到此方法
    const updateMessage = await CodePush.checkForUpdate() || {};

    // console.log(updateMessage);
    // return;

    // 执行更新
    await CodePush.sync(
      // 第一个参数吗，是个对象，可定义更新的动作
      {
        // 安装模式 'IMMEDIATE' 立刻安装， ON_NEXT_RESUME 下次启动安装
        installMode: CodePush.InstallMode.ON_NEXT_RESUME,

        // 强制更新模式下的安装，默认是IMMEDIATE 直接安装
        mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,

        //更新确认弹窗设置，设置系统自带弹窗中的内容
        updateDialog:{
          mandatoryUpdateMessage:'强制更新内容: '+updateMessage.description,
          mandatoryContinueButtonLabel:'强制更新/确认',
          optionalIgnoreButtonLabel:'取消',
          optionalInstallButtonLabel:'安装',
          optionalUpdateMessage:'本次更新内容: '+updateMessage.description,
          title:'发现新版本'
        }},
      // 第二个参数，更新状态检测，返回数字
      //0 已经是最新，1 安装完成、等待生效，2 忽略更新，3 未知错误，4 已经在下载了，5 查询更新，6 弹出了更新确认界面，7 下载中，8下载完成
      (status)=>{

        switch (status){
          case 0: alert('已经是最新版本');
            break;
          case 1 : !updateMessage.isMandatory && alert('更新完成, 再启动APP更新即生效');
            break;
          case 3: alert('出错了，未知错误');
            break;
          case 7 : this.setState({showProcess: true});
            break;
          case 8 : this.setState({showProcess: false});
            break;
        }
      },
      // 第三个参数，检测下载过程
      ({receivedBytes,totalBytes})=>{
        // console.log('DownloadProgress: ', receivedBytes, totalBytes);
        this.setState({receivedBytes: (receivedBytes/1024).toFixed(2), totalBytes: (totalBytes/1024).toFixed(2)})
      },
    );
    this.setState({showIndicator: false});
  };

  handleUpdate = () => this._handleUpdate().catch(()=>{
    this.setState({showIndicator: false});
    alert('网络错误')
  });

• 这个配置稍微复杂一点，但是自定义程度很高，比如要做下载滚动条，查看更新日志，都可以实现。默认情况下，再次启动app的时候，更新生效。

推送更新

设置完客户端之后，须要在服务端推送更细，客户端才能检测到更新。以上效果都是已经从服务端做了更新推送的。

• 推送命令，在项目根目录运行 appcenter codepush release-react -a <ownerName>/MyApp。

//  在默认情况下，更新会推送到Staging的部署
$ appcenter codepush release-react -a kk412027247/splashExample-ios
$ appcenter codepush release-react -a kk412027247/splashExample-android

//  指定版本更新 -d 加部署名
$ appcenter codepush release-react -a kk412027247/splashExample-ios -d Production
$ appcenter codepush release-react -a kk412027247/splashExample-android -d Production

// 设置更新日志，供前端读取
$ appcenter codepush release-react -a kk412027247/splashExample-ios  --description '1800的更新'
$ appcenter codepush release-react -a kk412027247/splashExample-android  --description '1800的更新'

• 强制更新，在项目根目录运行 appcenter codepush release-react -a <ownerName>/MyApp -m true
• 其实就是多了个-m true 参数而已，强制更新的默认效果是，用弹窗确认更新时候，只有确认键，并且安装成功后是立即生效，所以app可能会闪一下。

$ appcenter codepush release-react -a kk412027247/splashExample-ios -m true  --description '1052的更新'
$ appcenter codepush release-react -a kk412027247/splashExample-android -m true  --description '1052的更新'

• 查看更新看历史appcenter codepush deployment history -a <ownerName>/<appName> <deploymentName>

// 显示历史
$ appcenter codepush deployment history -a kk412027247/splashExample-ios Staging

// 清空历史
$ appcenter codepush deployment clear Staging -a kk412027247/splashExample-ios

官方资料

React Native Client SDK安装与配置 App Center CLI安装与配置 js api