我算是从安装到打包完成了一个 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 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

总结

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

欢迎大家关注 [前端学啥] 公众号一起学习