Taro 3.x 开发 APP 记录 (持续记录中。。。)

原创已于 2022-04-06 19:49:25 修改 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#app #react native #ios #android

于 2021-08-04 15:16:02 首次发布

移动端开发专栏收录该内容

5 篇文章

订阅专栏

本文记录了使用Taro 3.x进行APP开发的过程，包括样式(style)和页面(page)的注意事项，如样式限制、生命周期问题、页面布局等。详细介绍了如何在Xcode中配置HTTP请求，解决真机调试时遇到的问题，如Android和iOS的打包、图标与启动屏幕设置，以及签名证书的生成。此外，还涉及到了如何在APP中唤醒系统浏览器、禁止WebView滚动和动态获取内容高度等技巧。

Taro 3.x 开发 APP 记录

样式 style

任何组合选择器样式均会被 RN 忽略，仅支持类选择器；
css 属性均使用驼峰命名法，部分样式不支持；
不支持background-image 可以使用Image 标签做背景图；
对于文本的样式只在Text 标签生效；
border-radius 只在View 标签生效；
Android 上的RN font-weight 值只有400 700 normal bold 生效；
好用的UI组件库：推荐 React Native Elements
使用 antd-mobile 过程比较艰难包内缺少很多依赖需要手动下载
看报错对应下载就好了
这里是一部分 antd-mobile 缺少的依赖下载

页面 page

生命周期：useReachBottom Taro自带生命周期触底触发，但在使用中发现 个别页面 不仅是触及下底，触及上底也会触发，usePullDownRefresh 下拉刷新函数居然不执行。做下拉刷新上拉加载的时候要注意;

按钮贴底 ：可以通过 flex：1 通过RN端默认的flex 布局去做，具体该属性的用法&作用这里不做阐述，一个简单的思路就是在最外层和需要撑起页面空白部分的一层添加 flex:1 是其撑起空间从而实现按钮贴底；

我的理解：

最外层flex:1 则最外层撑起满屏高度；
需要撑起页面空白部分的一层 flex:1 则该层撑起空白部分；
（个人理解，欢迎评论区讨论~）
这里有一些理解思路，可以看看

插入HTML文本 / 外部网页：Taro 目前不支持RN端插入HTML字符串，推荐使用 react-native-webview 引入webView 还有一些个性化配置自查；（RN原生是有webview 组件的）；

2021.8.3 — 动态获取内容高度用到 injectedJavaScript 时，注入的js
获取内容高度建议使用document.body.offsetHeight 比 scrollHeight 准确一些

禁止 react-native-webview 组件可滚动，有属性 scrollEnabled={false}
使其高度自适应：这里可以参考~

( style={{ flex: 0, height: height }} 设置高度必须设置flex:0)
官网有解释：you need to add flex: 0 to the style if you want to use height property.

app调用相机拍照：Taro 提供 Camera 组件，Rn端目前只支持拍照不支持扫码功能。

重点：调用 api 创建 Camera 上下文需要在 Camera 组件的初始化阶段
使用 react Hooks 时在 useEffect 方法中初始化失败，需要在 Camera 组件的InitDone 事件中进行初始化。

加载视频组件：Taro 组件库的 Video 组件是不支持RN端的（其他端均支持），推荐使用 react-native-video 使用它的Video 配置简单；
2021.7.8 — 这个需要壳工程的配置，楼主是配置完没效果一直报错最后没有选择这个方案)
2021.7.9 — 特意抽时间搞了一下这个组件不仅要在项目内install 还要在壳工程 taro-native-shell 中 npm install && cd ios/ && pod install
2021.7.23 在Android上需要更多配置，不然乱了套了，默认controls 会在页面乱跑，尤其是视频列表时。

！注意：

查看 taro-native-shell/ios 下Libraries/ 下有没有 RCTVideo.xcodeproj 文件
没有的话右键点 Libraries – add files to … 把它加入（它位于 node_modules /react-native-video/ios/ ）
建立连接：
将libRCTVideo.a ----> 加入到 Link Binary With Libraries
重新编译启动后如果报错可以在github 找找解决办法戳这里解决问题~~~

时间显示问题：

获取到的数据为格林威治时间要转换为local 时间， App内通过 Date.parse() newDate() 转换失败显示为NaN；
调研得知：在移动端 new Date() 中只支持 YYYY/MM/DD hh:mm:ss 格式的时间转换格式；
解决：网上的方法不好使，手动将格林威治时间拆解成如上格式然后 +8 * 3600 * 1000 转换为当地时间。避免手动处理跨天跨月等情况。
其他方法有兴趣可以试试：(思路类似)

const data = new Date(str).toJSON();
let creationTimeStr = new Date(+new Date(data) + 8 * 3600 * 1000)
	  .toISOString()
	  .replace(/T/g, " ")
	  .replace(/\.[\d]{3}Z/, "")

APP内唤醒系统默认浏览器，打开指定页面

Taro RN 也是依赖了原生 react native，原生RN组件在编译APP时也是支持的哦
这里就采用原生RN的API Linking 实现

// 先导入方法哦 
import { Linking } from "react-native";
//使用系统浏览器访问指定URL
export const connectBrowser = () => {
	var baiduURL = 'http://www.baidu.com/'
	// ios 直接打开 appstore url = itms-apps://apps.apple.com/cn/app/id{APPID} 
	// itms-apps 不会被识别 需要在 info.plist 注册  具体的[戳这里](https://www.cnblogs.com/lude1994/p/11804808.html)
 		Linking.canOpenURL(baiduURL).then(supported => {
		if (!supported) {
			console.warn('Can\'t handle url: ' + baiduURL);
		} else {
			return Linking.openURL(baiduURL);
		}
	}).catch(err => console.error('error',baiduURL));
}

Xcode 配置：允许http请求

打开 info.plist
在 App Transport Security Settings 下增加 Allow Arbitrary Loads 值为 YES

详细配置解释：

iOS进行HTTPS适配深入理解与实践

真机调试报错

(如图所示)
在这里插入图片描述
百度有很多解决办法，楼主通过如下方法解决：

// 修改AppDelegate.m代码：
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
改为 =>
 [NSURL URLWithString:@"http://127.0.0.1:8081/index.ios.bundle?platform=ios&;dev=true"];
 // 如果不行 可以将127.0.0.1 改成 自己电脑局域网 ip （ 此时手机和电脑应该在同一局域网下 ！！）

android 真机调试

执行命令如下：

adb devices (mac 若提示 not found，刷新一下 android 环境变量文件 source .bash_profile 再执行)
adb reverse tcp:8081 tcp:8081

xcode 编译代码报错：

ld: library not found for -lpcre
clang: error: linker command failed with exit code 1 (use -v to see invocation)

xcode编译代码的时候 ld: library not found for -xxx 解决方法
另外有些库引入了但是因为目录路径不准确找不到，因此需要：
Build Setting”->“Search Paths”->”Library search Paths” 中找到 not found 的库
将其值改为 recursive (递归查找)
在这里插入图片描述

IOS 打包详解

xcode 新版本容易导致打包失败，必须切换打包程序
点击菜单栏 file – workspaceSetting – buildSystem - 选择Legacy Build System
最新xcode打包IPA（完整详细图文）

2021-8-10
更改 android 启动图中如果选用新增 activity 的方式，注意！
在 AndroidManifest.xml 中将新增的启动图 activity 放到其他 activity 前面时，多个activity 中都存在以下部分，只保留第一个内部的android.intent.category.LAUNCHER
因为：
{ action=android.app.action.MAIN, category=android.app.category.LAUNCHER } is the actual intent used by the Launcher to populate its top-level list.
翻译：添加了{ action=android.app.action.MAIN, category=android.app.category.LAUNCHER } 的 activity 是在程序启动的列表中的。所以如果定义多个LAUNCHER，就会出现多个APP图标。

<intent-filter>
   <action android:name="android.intent.action.MAIN" />
   <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

参考资料：【Android开发那点破事】Android调试安装出现2个或2个以上图标

不上架 AppStore 发布app

写一个 .plist 文件，（下面会展示），下载按钮调起安装程序指向 .plist 地址，
具体步骤：
注意： 不上架AppStore 打包的时候需要用 In House 企业级证书（$299）
会同时生成需要的 .plist .ipa；
苹果App，不用上传苹果商店，也能让其他人安装
 链接2 （同一篇，留个备用地址）