使用 Taro 3 框架进行跨端开发（ React Native，小程序，H5）—— 开发环境搭建

sumaolin
3,427 阅读5分钟

使用 Taro 3 框架进行跨端开发（ React Native，小程序，H5）—— 开发环境搭建

最近想尝试下跨端的开发，由于使用Taro开发过小程序，看文档时候知道Taro 支持跨端开发的，H5，小程序，React Native（实现的iOS 和Android APP的开发），最近有时间尝试下，记录下折腾的过程。

参考内容

大部分先看 Taro 官方的文档

  1. React Native 端开发流程 | Taro 文档 (jd.com)

    值得反复读，有些配置问题里面提到了

  2. React Native 端开发前注意 | Taro 文档 (jd.com)

    样式布局已 RN 的样式为准

    样式布局上 H5 最为灵活，小程序次之，RN 最弱，统一多端样式即是对齐短板，也就是要以 RN 的约束来管理样式，同时兼顾小程序的限制，核心可以用三点来概括：

    1. 使用 Flex 布局
    2. 基于 BEM 写样式
    3. 采用 style 属性覆盖组件样式

    React Native 不支持 background-image ，有什么解决办法吗？

    使用 Image 组件，配合 Flex/Position 布局，基本可以实现你的大部分需求。阅读一下这篇文章：Background Images in React Native，有助于你理解。

  3. Taro React Native 重大更新：帮助开发者高效开发APP | Taro 文档 (nervjs.github.io)

    进一步简化了 Taro React Native的开发流程了，直接 taro CLI 一键通过项目模板 taro-project-templates/react-native at v3.5 · NervJS/taro-project-templates (github.com) 生成项目，通过npm 安装相关依赖，就可以运行项目了，项目效果通过 Taro playground 扫码预览调试效果。iOS和Android的打包是通过GitHub action打包，不用再费心配置iOS或者Android的开发环境了

  4. 增加 React Native 支持的 Taro 3.2.0 版本测试通告 · Issue #8180 · NervJS/taro (github.com)

    给到的资料也很多，有几个官方的demo学习

  5. Taro 3.2 适配 React Native 之样式内幕 (qq.com)

    1. Jsx 语法层面只是类选择器转换成立jsx中style 内联样式，所以只支持类选择器，并且不支持组合类选择器

    2. sass 的 BEM写法

    3. 在 Web 端的，class 跟样式文件的定义样式的顺序有关，跟标签的 class 属性书写顺序无关，而在 React Native，却跟 class（处理成 style）的顺序有关。这个问题，现阶段只有在代码层去规避，还没有想到很好的方法去解决

    4. 文件名区分不同平台的样式代码如，stlye.rn.css

    5. 文件中通过 代码区分不同平台

      /*  #ifndef  %PLATFORM%  */
/* 平台特有样式 */
/*  #endif  */

  6. 从零开始玩转React Native！45分钟带你走一遍开发流程_哔哩哔哩_bilibili

    react native的流程，前端没接触过 react native可以看下，整体的流程，看完了我想建立iOS的开发环境了，因为有热更新功能

初始化项目中的 issue

看了再多的文档，自己动起手来也还是有bug的，遇到的就罗列下，初期不想搭建配置iOS或者Android的开发环境的，执行运行起来，通过taro playground 查看下过的，后面看了下 react native的视频，决心搭建 iOS开发环境了

通过模板进行初始化

直接模板搭建环境，通过 Taro playground 预览效果，看模板的 readme 进入开发

taro init rnDemo // 选择 react框架 然后再选择 react native 模板
// cli 会自动 进入项目目录并且 rnDemo
yarn upgradePeerdeps // install react native library
yarn podInstall // 

yarn ios  // start ios app

yarn android // start android app

yarn start // start bundler 启动成功后会有 二维码供 taro playground 扫描预览

issues

  1. Pod install 失败问题

    CDN: trunk Repo update failed - 2 error(s)

    1. Podfile add source 'https://github.com/CocoaPods/Specs.git'
    2. remove trunk pod repo remove trunk

  2. yarn start 后taro playgroud 扫码后页面空白的bug

    初始化 React Native 模板后，运行白页 · Issue #11760 · NervJS/taro (github.com)

    锁定版本解决

    最新版本的 @babel/traverse@7.17.10 导致。

    解决方案：

    在 package.json 中锁定 @babel/traverse 版本

    {
"resolutions": {
"@babel/traverse": "7.17.9"
}
}

    记得清一下编译缓存

    yarn dev:rn --reset-cache

  3. 扫码后 CLI 报错：RROR Invariant Violation: "taroDemo" has not been registered. This can happen

    修改moduleName后无法通过Taro Playground调试app · Issue #11205 · NervJS/taro (github.com)

    将 config/index.js 的 rn.appName 改成 taroDemo 可解决。

  4. eslint 报错的配置错误 ：View' cannot be used as a JSX component

    react ts提示异常 · Issue #11097 · NervJS/taro (github.com)

    解决办法

    1. 各位可以删除 node_modules 后使用 npm i 重新安装依赖，这样能最快解决问题。
    2. Taro 在 redux 模板中增加 resolutions，这样新建的项目能避免此问题：
    {
  "resolutions": {
    "@types/react": "17.0.2"
  }
}
    1. Taro 兼容 React 18，升级 react-redux 和 @types/react，在下个大版本 v3.5 支持

iOS模拟器关联使用

macOS下面操作的，要安装最新的 xcode 的开发环境的

issues

  1. 报错信息：

    yarn run v1.22.11
$ react-native run-ios --no-packager
info Found Xcode workspace "cost_taro_rn.xcworkspace"
info Building (using "xcodebuild -workspace cost_taro_rn.xcworkspace -configuration Debug -scheme cost_taro_rn -destination id=A5C368D1-E0CF-4A3E-94D3-A13323A475D6")
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening cost_taro_rn.xcworkspace.
Command line invocation:
    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace cost_taro_rn.xcworkspace -configuration Debug -scheme cost_taro_rn -destination id=A5C368D1-E0CF-4A3E-94D3-A13323A475D6

User defaults from command line:
    IDEPackageSupportUseBuiltinSCM = YES

note: Using new build system
note: Building targets in parallel
note: Planning build
note: Analyzing workspace
note: Using build description from disk
note: Build preparation complete
PhaseScriptExecution [CP]\ Check\ Pods\ Manifest.lock /Users/kevinsu/Library/Developer/Xcode/DerivedData/cost_taro_rn-fyhgrookkywmyzgjgfotboxadmza/Build/Intermediates.noindex/cost_taro_rn.build/Debug-iphonesimulator/cost_taro_rn.build/Script-231AD7C5FE9E49D02203CF08.sh (in target 'cost_taro_rn' from project 'cost_taro_rn')
    cd /Users/kevinsu/devCode/sumaolin/gitcode/cost_taro_rn/ios
    /bin/sh -c /Users/kevinsu/Library/Developer/Xcode/DerivedData/cost_taro_rn-fyhgrookkywmyzgjgfotboxadmza/Build/Intermediates.noindex/cost_taro_rn.build/Debug-iphonesimulator/cost_taro_rn.build/Script-231AD7C5FE9E49D02203CF08.sh
error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.


** BUILD FAILED **


The following build commands failed:
	PhaseScriptExecution [CP]\ Check\ Pods\ Manifest.lock /Users/kevinsu/Library/Developer/Xcode/DerivedData/cost_taro_rn-fyhgrookkywmyzgjgfotboxadmza/Build/Intermediates.noindex/cost_taro_rn.build/Debug-iphonesimulator/cost_taro_rn.build/Script-231AD7C5FE9E49D02203CF08.sh
(1 failure)

info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.

    错误提示中 pod install ，同时看文档直接到ios 目录下 pod install 去解决

  2. 报错信息：

    yarn run v1.22.11
$ react-native run-ios --no-packager
info Found Xcode workspace "cost_taro_rn.xcworkspace"
info Building (using "xcodebuild -workspace cost_taro_rn.xcworkspace -configuration Debug -scheme cost_taro_rn -destination id=A5C368D1-E0CF-4A3E-94D3-A13323A475D6")
// 省略打断错误信息，关键报错：
The following build commands failed:
	CpResource /Users/kevinsu/devCode/sumaolin/gitcode/cost_taro_rn/ios/ios /Users/kevinsu/Library/Developer/Xcode/DerivedData/cost_taro_rn-fyhgrookkywmyzgjgfotboxadmza/Build/Products/Debug-iphonesimulator/cost_taro_rn.app/ios
(1 failure)

    解决办法

    1. 先编译 yarn build:rn --platform ios，目录下生成asset相应的文件
    2. xcode 中打开已有项目进行设置： 设置-xcode-相关参数
    3. xcode 中项目名称的配置： 使用-xcode-启动 修改 AppDelegate.m文件中的项目名称，替换成 taroDemo，因为metro server中使用的是taroDemo，某某构建的时候要修改会来。metro server中的项目名称再config/index中配置的，前面是因为taro playground的APP中使用了taroDemo没法修改，如果不用taro playgroupd APP就不用修改这个了，只用1,2就可以了

    开发调试

    1. yarn start 启动 metro server
    2. Yarn ios 启动模拟器，后面src代码修改就可以hot reload 样式了
avatar
文章
阅读
粉丝