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 首次发布

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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