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

Mondo

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

安装环境

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

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

Windows 平台

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

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

Android 环境

  • 下载 Android Studio,安装界面 Custom 确认选中下列项:

  • 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

image.png

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

image.png

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

image.png

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

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

image.png

Hello World

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

运行项目

npx create-react-native-app rn-project

cd rn-project

yarn android

第一运行项目,编译时间可能会比较长,如果一切顺利会弹出一个 cmd 框,这个运行项目的时候是不能关闭的,它是一个 node 监听服务。
image.png
模拟器上出现界面
image.png

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

异常处理

异常 JAVA_HOME

启动命令编译时抛出异常
image.png
需要我们找到 Android Studio 安装目录下 jre 目录

设置系统变量 JAVA_HOME

image.png

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

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

image.png

重新打开 cmd 运行成功
image.png

异常 app:installDebug

抛出异常
image.png
android 目录下查看 local.properties 文件,没有自己新建一个,指定 android sdk 安装目录

sdk.dir=E\:\\androidsdk

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

image.png

  • 要删除代码行中的注释
  • 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

image.png

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

image.png

调试

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

image.png

Chrome 调试

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

真机调试

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

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

image.png

选择 Debug 利用 Chrome 调试

react-native-debugger

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

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

image.png

跨域处理

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

动画库

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

类型值

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

配置动画

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 动画

实现效果

loading.gif

直接上代码

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 选项

image.png

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

image.png

命令生成

除了使用 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天之后该证书将失效

按照提示一步步执行即可
image.png
最后生成了密钥证书

设置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 工具
image.png

签名打包

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

image.png

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

image.png

可以手动安装至安卓真机

rn12.gif

异常处理

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

执行命令

cd android
./gradlew clean
cd .. 
yarn android

总结

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

阅读 1.4k

现在开始,从心出发

945 声望
20 粉丝
0 条评论

现在开始,从心出发

945 声望
20 粉丝
文章目录
宣传栏