[移动开发] Taro 3.x 开发 APP 记录 (持续补充中。。。)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Taro 3.x 开发 APP 记录 (持续补充中。。。) -> 正文阅读

[移动开发]Taro 3.x 开发 APP 记录 (持续补充中。。。)

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

页面 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.

加载视频组件：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/, "")

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 （ 此时手机和电脑应该在同一局域网下 ！！）

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 (递归查找)
在这里插入图片描述