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

Taro 3.x 开发 APP 记录

样式 style

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

页面 page

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

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

我的理解：

1. 最外层flex:1 则 最外层撑起 满屏高度；
2. 需要撑起页面空白部分的一层 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/ ）
建立连接：