mmdoc

Appearance

介绍 ​

基于Taro的React Native开发文档

公司提供开发模式是Taro集成模式 基于此模式。我们能够真正的实现多端开发(适配H5 Weapp APP)。真正的 Write One Code, Run AnyWhere

警告

建议仅使用此模式开发React Native + 轻量H5页面

本指南不是一份 step by step 的开发指南。如果你是新手。你仍旧需要先学习一下官方文档。这里提供的更多是公司RN框架使用以及常见需求、坑点处理。

什么是 React Native？ ​

React Native 是由 Facebook 开发的一个开源框架，用于构建原生移动应用程序。与传统的原生开发方式不同，React Native 允许开发者使用 JavaScript 和 React 的组件模型来构建移动应用程序，同时利用底层平台的功能和性能。

React Native 的一个重要特点是它的跨平台能力。你只需要编写一次代码，就可以在多个平台（如 iOS 和 Android）上运行应用程序，而无需为每个平台编写独立的代码。这大大简化了开发流程并提高了开发效率。

关于代理 ​

安装过程中有大量的依赖包需要安装。并且这些包需要从国外的服务器下载。所以如果你的网络环境不能科学上网。那么就会安装失败。

同时你还需要做以下的事情

终端开启代理 ​

在终端执行需要设置代理

bash
#  windows
#  代理软件端口号  比如clash软件是7890
set http_proxy=http://127.0.0.1:[代理软件端口号]
set https_proxy=http://127.0.0.1:[代理软件端口号]

# mac
```bash
export http_proxy=http://127.0.0.1:[代理软件端口号]
export https_proxy=http://127.0.0.1:[代理软件端口号]

Android Studio ​

Android Studio 也需要设置代理。具体设置方式查询百度

安装 ​

APP开发的第一个难关：环境安装与设置。请你务必跟着官方文档一步一步的执行。 任何步骤出现错误都需要解决后再进入下一步。如果出现你无法解决的问题。请即使找你的领导/架构师协助解决

调试 ​

参考官方文档

注意点:

  • windows系统无法调试ios。苹果电脑ios，android均可调试。

  • android模拟器存在大量和真机不同的行为和样式，调试安卓请使用真机。

  • 安卓多次安装会出现无法清理缓存的情况。请运行 cd ./android & gradlew clean 或 手动删除 android\app\build

  • js 文件报错的情况下。会导致 react-native start 无法生成正确的js包文件。需要重启 react-native start。

  • 重启无效需要清理缓存。react-native start --reset-cache。运行脚本默认会清除

  • 苹果安装进入ios目录。运行pod install安装依赖。遇到安装很慢的情况，可替换国内镜像：https://note.qidong.name/2020/12/github-proxy/。

常见问题 / 答疑 ​

信息

react-native 很多框架都会出现一些版本不兼容。各类报错。请使用AI、谷歌搜索、查阅github。
请勿使用百度！！！ TA基本上解决不了问题

下面罗列了一些常见问题

更新包与已安装应用的签名不一致 ​

启动应用报更新包与已安装应用的签名不一致但在应用管理中却找不到这个已经卸载的应用。这是因为你之前安装了这个应用并且手动卸载了。

解决方法: 手机连接电脑。在终端执行命令 adb uninstall com.tarodemo 卸载应用

如果你不知道包名称。你可以使用 adb shell pm list packages -f 命令来查看所有已安装的应用包名，然后再使用 adb uninstall 包名 来卸载应用。

启动安卓报错 xxx does not exist ​

bash
Starting: Intent { cmp=com.tarodemo/.MainActivity } 
Error type 3
Error: Activity class {com.xxx/com.xxx.MainActivity} does not exist.

解决方法: 遇到这个问题的时候。可以尝试运行命令adb uninstall com.xxx 然后再运行 yarn android

渲染文字 ​

所有文本均要使用Text包裹，不然程序会直接报错，有的情况下会导致程序直接崩溃。

但是你会发现公司框架使用 taro-components包中的View组件也是可行的！。这是因为此组件在内部给你做了兼容处理。并且做了点击事件处理

flex布局 ​

react-native 无浮动布局，全部均是flex布局。flexDirection默认值：column

阴影效果 ​

安卓使用elevation:4属性实现阴影。这只是灰色的阴影。无法灵活的控制角度颜色等属性。 复杂的阴影请使用图片代替。

渐变效果 ​

react-native的渐变通过react-native-linear-gradient实现。

背景色问题 ​

如果一个列表多个View的情况下，给每个View设置背景色。有些机型可能出现View之间会有间隙。

zIndex问题 ​

react-native的zIndex表现方式和html5不一样。永远对比的都是同一级。而且设置elevation永远层级最高。

点击问题 ​

点击均使用TouchableOpacity。activeOpacity不设置为1,会有个点击透明度改变的反馈。 Text的onPress。无背景色的情况下某些机型会难以点击。

注意 Taro RN 并无这个限制。View组件可正常使用onClick

尽量不要使用Modal组件。存在大量的问题。并且Modal层级非常高。高到盖不住且只能单例

TextInput ​

TextInput安卓存在默认padding，需要清理padding。

长列表数据渲染 ​

瀑布流式的数据加载请使用FlatList。ScrollView会一次性把所有数据渲染出来导致卡顿。

权限问题 ​

安卓使用权限前需要使用PermissionsAndroid申请权限。苹果不需要。有些框架帮你申请了。有的没有。不申请权限直接调用。会导致闪退。安卓和苹果的权限均需要配置配置文件。

有些sdk不支持react-native ​

比如IM通讯无react-native版本，我们可以通过webview包壳的方式把sdk放到webview里面来回通讯解决。 同理webview的canvse也可以包壳使用，一部分react-native不支持的东西都可以通过webview包壳解决。

安卓调试 ​

安卓调试清理缓存react-native start --reset-cache。重启后会断开连接。再插上并不会自动连接。需要运行命令adb reverse tcp:8081 tcp:8081重新连接。

触摸机制 ​

安卓的触摸机制和ios的触摸机制不一样。安卓ScroView的滚动事件会拦截触摸。

毛玻璃效果 ​

苹果支持毛玻璃效果。安卓的毛玻璃效果组件有很多bug。

例如Link.canopenurl总是返回false

解决方法: 这是因为权限设置问题
在IOS中需要处理LSApplicationQueriesSchemes

Android SDK >= 30 引入了一项新的 Android 安全功能：Package Visibility.以 Android 11 （SDK 30） 为目标平台时，您需要更新并 AndroidManifest.xml 包含要查询的应用列表

XML
<manifest package="com.example.game">
  <queries>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="http"/>
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="https"/>
    </intent>
    ...
  </queries>
  ...
</manifest>

请注意!!!下面这个方式仅适合特定应用（例如防病毒应用、文件管理器或浏览器）。

XML
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />

如果您不符合下列任何应用类型的条件，或者 QUERY_ALL_PACKAGES 以未经授权的方式使用 在申请可能将被拒绝

安卓微信分享提示签名不一致 ​

首先参照这个与这个修复. 如果确认签名跟开放平台移动应用的是一致的。那么你需要清一下微信APP缓存：

  • 清除微信缓存
  • 退出微信：微信-设置-退出。注意：使用系统上滑杀后台是没用的。
  • 如果以上两步还不行。那么终极办法 - 卸载重装

为什么选择 React Native？ ​

React Native 提供了许多优势和吸引力，使其成为移动应用开发的首选框架之一：

  • 跨平台开发：使用 React Native，你可以通过共享一套代码在多个平台上构建应用程序，减少了开发和维护的工作量。

  • 快速迭代开发：React Native 的热重载功能允许你在开发过程中实时预览和调试应用程序，加快了开发速度和迭代周期。

  • 强大的社区支持：React Native 拥有庞大的开发者社区，提供了丰富的文档、教程和开源组件，可以帮助你解决问题和加速开发过程。

  • 原生性能：React Native 应用程序在性能方面接近原生应用程序，并允许你通过使用原生代码进行优化来满足更高的性能要求。

其他框架对比 ​

Why Not Uniapp？ ​

uniapp有开发工具的支持。并且vue更加适合新手。看起来使用方面会更快。但是uniapp也有天然的问题

  • webview方案。性能天然不如RN
  • weex方案社区早就放弃。扩展性太差
  • 过度的封装导致过度的黑盒。定制与扩展能力太弱。出现问题很难解决
  • 社区生态：社区生态相比RN差太多了

Why Not Flutter? ​

Flutter最近风头确实很盛。性能也强于RN。不使用的原因也很简单 Dart语法....

Why Not ArtTs ​

因为太新。先观望