我算是从安装到打包完成了一个 React Native 项目

由于自己没有接触过移动端开发，所以选用了 React Native，毕竟任何可以使用 JavaScript 来实现的应用都最终都会使用 JavaScript 实现 😄，由于自己没有 Mac 开发者账号，所以只打包了安卓端

安装环境

React Native 安装环境的谜之复杂可能让你还没开始就要放弃

环境安装一定要按照官方文档的流程一步步来，切记！切记！切记！

Windows 平台

如果使用 window 作为开发环境，我们只能开发 Android 应用。
必要的依赖：

Node 需要 v12 版本以上
JDK 必须是 1.8 版本或者 8 版本
Android Studio

Android 环境

下载 Android Studio，安装界面 Custom 确认选中下列项：
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM) (AMD 处理器看这里)
- Android Virtual Device
Android SDK：可在欢迎界面找到 SDK Manager，安装 android 9 (pie)

使用前的环境安装一定要按照官方文档来，不然后面出现各种异常让人直接想放弃使用，安装环境主要注意 Android Studio 的安装。

macOS 平台

如果使用 mac 开发，我们可以开发 IOS 和 Android 两种应用。

IOS 环境

必要的依赖：

Node 需要 v12 版本以上
watchman 是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）
Xcode 可以在 App Store 找到直接下载
CocoaPods

注意：

cocoapods 安装可能需要墙工具，如果没有墙可翻，需要多尝试，或者在夜生人静的时候再次尝试，还不行可以直联自己的手机网络再次尝试，还不行的话，尝试这篇文章的方法
首次运行项目时，可能需要执行 pod install

进入 ios 目录，执行 pod install 抛出异常

这个也是由于依赖包需要墙工具导致网络异常，尝试使用手机网络后可能抛出

在项目中执行 sudo xcode-select --switch /Applications/Xcode.app 后，再次执行 pod install

以上安装推荐使用手机网络，如果下载异常，多试几次，多试几次，多试几次，直到安装成功

Hello World

当我们安装完上面一系列的环境后，如果一起顺利的话，我们就可以准备初始项目，跑起来一个 Hello World
我们运行项目前需要打开 android 模拟器

运行项目

npx create-react-native-app rn-project

cd rn-project

yarn android

第一运行项目，编译时间可能会比较长，如果一切顺利会弹出一个 cmd 框，这个运行项目的时候是不能关闭的，它是一个 node 监听服务。

模拟器上出现界面

恭喜你万里长征已经走了一半了！

异常处理

异常 JAVA_HOME

启动命令编译时抛出异常

需要我们找到 Android Studio 安装目录下 jre 目录

设置系统变量 JAVA_HOME

对应的 PATH 路径需要添加两条记录

%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin

重新打开 cmd 运行成功

异常 app:installDebug

抛出异常

在 android 目录下查看 local.properties 文件，没有自己新建一个，指定 android sdk 安装目录

sdk.dir=E\:\\androidsdk

异常 Text strings must be rendered within a <Text> component

要删除代码行中的注释
Text 组件需要判断值，不能为空字符串

{province ? <Text className="province">{province}</Text> : null}

如何调试

这里使用的开发平台是 Window 环境

第三方模拟器

React Native 调试可以使用 Android Studio 自带的模拟器

也可以使用第三方模拟器；这里选用雷电模拟器

打开模拟器调试模式：应用设置 -> 关于平板电脑 -> 连续点击 5 次版本号 -> USB 调试
连接模拟器
- win + r 然后打开 cmd
- adb connect 127.0.0.1:5555
- 不同模拟器的端口号是不同的
在项目根目录下运行 yarn android

如果出现 adb 不是命令，需要添加环境变量，找到 Android Studio JDK 安装目录下 platform-tools 目录

调试

点击更多 -> 摇一摇 -> debug

Chrome 调试

所有的调式都可以打开地址 http://localhost:8081/debugger-ui/ 来进行查看

真机调试

这里指 Android 手机

需要打开手机 USB 调试模式，直连数据线至电脑
项目根目录执行命令: yarn android

项目成功启动后会在手机上看到启动的程序，如果需要调试，需要摇一摇手机可以看到弹框

选择 Debug 利用 Chrome 调试

react-native-debugger

这个 debugger 插件很强大。
使用：

关闭 Chrome 浏览器中所有的 http://localhost:8081/debugger-ui/ 页面（RN默认的 debugger 工具）
下载 react-native-debugger 应用
Android Studio 模拟器中的 Nexus S ，因为这个模型是有菜单键的，高版本的模拟器通常没有。
使用快捷键 Ctrl+M 也可以打开菜单栏。

跨域处理

查了大半资料，建议还是使用 nginx 做反向代理处理

动画库

React Native 由于并不支持 CSS3 动画，所以我们实现动画效果需要使用其内置的 Animated 库

类型值

提供两种类型值，其可以绑定到样式获其它属性上

Animated.Value() 用于单个值
Animated.ValueXY() 用于矢量值

配置动画

Animated 提供了三种动画类型。每种动画类型都提供了特定的函数曲线，用于控制动画值从初始值变化到最终值的变化过程：

Animated.decay() 指定的初始速度开始变化，然后变化速度越来越慢直至停下。
[Animated.spring()](https://reactnative.cn/docs/animated#spring) 提供了一个基础的弹簧物理模型.
Animated.timing() 使用 easing 函数让数值随时间动起来。

大多数情况下你应该使用 timing()。默认情况下，它使用对称的 easeInOut 曲线，将对象逐渐加速到全速，然后通过逐渐减速停止结束。

使用动画

通过调用 start() 函数启动动画。

start 函数可以传入回调函数，动画完成时通知调用
正常运行完成，回调值 { finished: true }
调用 stop 函数结束，回调值 { finished: false }

自定义动画组件

可以通过 createAnimatedComponent 来封装任意 React 组件，使其动画化

Animated.Image
Animated.ScrollView
Animated.Text
Animated.View

Loading 动画

实现效果

直接上代码

import React, {useRef, useEffect} from 'react';
import {View, StyleSheet, Animated, Easing} from 'react-native';

const Loading = () => {
  let spinAnim = useRef(new Animated.Value(0));

  const loadingAnim = () => {
    Animated.timing(spinAnim.current, {
      toValue: 1,
      duration: 1500,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(({finished}) => {
      if (finished) {
        spinAnim.current.setValue(0);
        loadingAnim();
      }
    });
  };

  useEffect(() => {
    loadingAnim();
  });

  //映射 0-1 的值 映射 成 0 - 360 度
  const spin = spinAnim.current.interpolate({
    inputRange: [0, 1], //输入值
    outputRange: ['0deg', '360deg'], //输出值
  });

  return (
    <View style={Styles.loading}>
      <View style={Styles.loader}>
        <Animated.View
          style={[
            Styles.loaderBall,
            {
              transform: [{rotate: spin}],
            },
          ]}>
          <View style={Styles.loaderBallHook} />
        </Animated.View>
      </View>
    </View>
  );
};

const Styles = StyleSheet.create({
  loading: {
    width: '100%',
    height: '70%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  loader: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: 35,
    width: 35,
    borderRadius: 35,
    backgroundColor: '#FE9727',
  },
  loaderBall: {
    position: 'relative',
    height: 30,
    width: 30,
    borderRadius: 30,
    // animation: spin 2s ease infinite,
  },
  loaderBallHook: {
    position: 'absolute',
    zIndex: 1,
    left: 5,
    top: 5,
    height: 7,
    width: 7,
    backgroundColor: '#fff',
    borderRadius: 7,
  },
});

export default Loading;

打包发布

打包 APK

Android 打包参考官方网站流程

生成签名证书

Android Studio 生成

可以按照谷歌文档对应生成即可。这里要注意的是可能有些 Android Studio 没有 Generate signed apk 这个选项，这里需要我们点击 File ->选择如图 Sync Project with Gradle Files 选项

然后可以在 Build 项看到 Generate signed apk

命令生成

除了使用 Android Studio 自动生成证书，也可以执行命令来生成证书

keytool -genkey -v -keystore myApp.keystore -alias myApp.keystore -keyalg RSA -validity 30000

参数含义

参数	含义
keytool	工具名称（固定写法）
)-genkey	执行的是生成数字证书操作（固定写法）
-v	打印生成证书的详细信息
-keystore myApp.keystore	生成的证书的文件名为"myApp.keystore"(根据需求，设置你的证书名)
alias myApp.keystore	证书的别名为"myApp.keystore"。
(一般和上面的文件名相同，可以不同，但要记好，签名时会用(A))
-keyalg RSA	生成密钥文件采用的算法为RSA(固定写法)
-validity 3000	该数字证书的有效期为30000天，30000天之后该证书将失效

按照提示一步步执行即可

最后生成了密钥证书

设置gradle变量

把生成的证书复制到项目 /android/app/ 目录下
编辑项目中的 gradle.properties 文件

MYAPP_RELEASE_STORE_FILE=myApp.keystore
MYAPP_RELEASE_KEY_ALIAS=myApp.keystore
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456

添加签名配置

修改 android/app/build.gradle

   signingConfigs {
        ...
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            signingConfig signingConfigs.release
              ...
        }
    }

修改应用名称

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

<resources>
    <string name="app_name">应用名称</string>
</resources>

修改应用 Icon

将下列目录下的图标替换成需要的 Icon 即可，推荐使用 Android Studio 自带的 image-asset-studio 工具

签名打包

进入 /android 根目录执行命令 ./gradlew assembleRelease

成功后可以在 /android/app/build/outputs/apk 目录下找到打包后的 apk 文件

可以手动安装至安卓真机

异常处理

出现 Error: Cannot create directory ..\mergeDebugResources\merged.dir\values

执行命令

cd android
./gradlew clean
cd .. 
yarn android

总结

总的来说，开发还是很适应，不过前面的环境安装是实在有点劝退啊😄，欢迎大家下载安卓端试试

我算是从安装到打包完成了一个 React Native 项目

安装环境

Windows 平台

Android 环境

macOS 平台

IOS 环境

Hello World

运行项目

异常处理

异常 JAVA_HOME

异常 app:installDebug

异常 Text strings must be rendered within a <Text> component

如何调试

第三方模拟器

调试

Chrome 调试

真机调试

react-native-debugger

跨域处理

动画库

类型值

配置动画

使用动画

自定义动画组件

Loading 动画

打包发布

打包 APK

生成签名证书

Android Studio 生成

命令生成

设置gradle变量

添加签名配置

修改应用名称

修改应用 Icon

签名打包

异常处理

总结

Mondo

引用和评论

摸着文档过河的 Canvas 绘制

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了