rn-relates
rn-relates copied to clipboard
ljunb
📝一些关于 React Native 项目实践的记录。
## 背景 小鹏汽车 App ReactNative (以下简称RN) 热更新的实践方式，可能与其他 App 不大一样。当前虽然已经做了 RN 业务的拆包处理，但实际 RN 在 Jenkins 的构建产物是一个压缩文件，该文件在构建 App 的时候通过脚本下载和解压，最终打进 App 里面，作为当前版本的原始基准包。当时我们在设计热更新体系的时候，没有对 RN 构建产物做过多修改，最终每次热更活动下发的，都是这个完整的压缩文件。在热更完毕之后，RN Bundle 管理类将不再从 Asset 中加载拆分后的 Bundle 文件，而是加载沙盒中热更目录的文件，来达到最终的热更效果。 ## 现状 与进入...
## 背景 最近准备在 App 中接入 [Reanimated](https://github.com/software-mansion/react-native-reanimated) 和 [GestureHandler](https://github.com/software-mansion/react-native-gesture-handler)，之前其实尝试接过，不过有未知报错，后续因为有业务跟进，便一再搁置。前段时间领导提到动效库的必要性，考虑到这两个库的高性能特性，因此再次尝试接入。 ## 接入 ### babel-preset缺失 首次接入时，两者版本分别是 `[email protected]`、`[email protected]`，基本属于最新稳定版本。参照官方文档的 [安装步骤](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)，在项目根目录添加了 `babel.config.js` 配置文件，并补充相应配置： ```javascript module.exports = { plugins: ['react-native-reanimated/plugin'] }; ``` 通过打进 XRN 的方式在工程中引用，并新建相应的测试页面，发现启动时报错： ```text error:...
最近在托哥的带领下，参与了小鹏 App 的技术专项开发，主要也是因为公司上市后，部门和业务都有相应的变化。为了提供更高的交付效率，提出了服务营销效能交付的技术专项。主要包括： - 提供 ReactNative 热更新 - UI动态化布局 - App 组件化 目前已经启动的是在搭建热更新体系，现已进入与 OTA 平台联调阶段。本篇主要针对搭建过程中，对 JavaScript 和 iOS 端改造的一些简单记录。 ### CodePush热更流程简述 CodePush 在 JavaScript 端暴露的接入方式很简单，只需要在入口文件调用 `CodePush.sync(syncOptions)(App)` 即可，实际该函数是一个高阶函数，其内部最终调用的是 syncInternal 函数，因此可以从该入口函数开始源码阅读之旅。进入 syncInternal...
## 背景 小鹏 App 非车主首页涉及潜客、潜客车辆配置和预订车主三种业务场景，每种场景所展示的卡片也不尽相同。在该功能上线之初，使用的是传统原生 UITableView 的开发模式，因此当业务需求涉及一些 UI 改动时，只能通过发布新版本达到目的。Android 端之前已经接入 Tangram，并且线上表现稳定，为了提高 App 的动态下发能力，iOS 端的集成也日渐提上日程。区别于 ReactNative 跨端开发、热更修复的特性，App 动态布局更多的是强调插件化，通过在 App 内嵌一个布局坑位，然后下发不同的组件和布局信息，运营童鞋仅仅需要修改配置信息，那么就可以达到期望的布局效果。 经过一段时间的开发和测试，基于 Tangram-iOS 二次封装开发的 XTangram 已经上线，目前经过重构的非车主首页也正在灰度中，暂无发现功能和体验问题。本文会简单介绍 XTangram 的实现过程，其中涉及 [VirtualView-iOS](https://github.com/alibaba/VirtualView-iOS)、[Tangram-iOS](https://github.com/alibaba/Tangram-iOS) 两个框架的一些修改，和部分自定义的功能代码。 ## 开发流程...
### 背景 最近参与了鹏友圈 2.16 社区视觉改版的功能开发，其中遇到一个奇怪的问题： > 在个别机型下，`Text` 组件设置了 `lineHeihgt` 后，发现 `numberOfLines` 有显示问题，尾随出现了一行空行。复现机型有 iPhone 8 Plus、iPhone 11 Pro Max 一开始以为是 RN 中文网[提及](https://reactnative.cn/docs/text#known-issues)的 `Text` 嵌套导致的问题，查看后发现并不是同个问题。尝试搜了下 issue 列表，发现类似反馈和相关讨论： > [#29298 - Text's numberOfLines...
算下来转正也接近一个月了，在这里参与了两个混编项目，遇到一些坑，说实在的，自己差点就忘了做纯`RN`开发是什么感觉了。Σ( ° △ °|||)︴ --- 目前正开发中的项目，是一个面向销售人员的汽车营销APP，基于公司原生技术的积累，该项目也是在原生的骨架上来开发。按目前项目分工来看，原生与`RN`的业务比例呈1:1分布，仍然没达到团队老大的理想效果，他期望的是2:3。`RN`表示我也很绝望啊，但是有些东西给原生这大佬去做，肯定是要好的嘛~ 在目前的APP架构中，底部分4个`Tab`，其中有两个界面是由原生`ViewController`加载的`RN`界面。在实践过程中可以发现，如果在点击切换界面时才加载`RN`的`rootView`，那么在第一次切换到`RN`界面时，就会出现短暂的白屏，非第一次则没有该问题。在与小伙伴的一番讨论之后，决定是在APP启动之后，采用预加载的形式提前渲染这两个`RN`界面。 其实需求比较简单，就是提前把`rootView`给加载出来，然后在相应`ViewController`的`viewDidLoad`中去把保存好的`rootView`取出来，赋值给`self.view`就可以了。这里用单例形式来管理： ```objc #import #import @interface PCReactRootViewManager : NSObject /* * 获取单例 */ + (instancetype)manager; /* * 根据viewName预加载bundle文件 * param: * viewName RN界面名称 *...
RN实现长屏截图
当前参与的项目中，个别`RN`界面需要生成长屏图片进行分享，目前是使用了 [react-native-view-shot](https://github.com/gre/react-native-view-shot) 。安装之后，简单使用方法： ``` import ViewShot, {captureRef} from 'react-native-view-shot'; export default class SomeView extends Component { render() { return( this.scrollView = r}> ... ) } } ``` 调用方法： ``` handleCaptureImage...
* 1 新建一个 React Native 项目，并 `cd` 到根目录； * 2 添加必要的依赖： ``` yarn add @types/react @types/react-native yarn add --dev react-native-typescript-transformer typescript or npm install --save @types/react @types/react-native npm install --save-dev...
## 背景 在最近的一版需求中，App 的目的地详情页面，接入了中文站旅拍的入口，支持查看该目的地下或是 POI 下的相关旅拍。在旅拍详情页面中，参考中文站的功能交互，头图在滑动切换时需要做高度的渐变动画。 在自定义的滑动组件中，为了有更优效果，iOS、Android 两端分别采用了 ScrollView、ViewPagerAndroid 来实现。实际开发发现，把 Animated.View 作用于 ScrollView 外层，可达到目的。 而 ViewPagerAndroid 则无法使用该方式，由此引出 `Animated.createAnimatedComponent` 来封装 ViewPagerAndroid。 ## 问题 ### 组件渲染 iOS 端调试完毕后，开始着手 Android 端的实现。基于旅拍详情页的设计稿，该页面的最外层是需要使用 ScrollView 的，所以滑动组件属于...
组件封装
### props & state 在进行组件封装之前，需要先对 `props` 和 `state` 有所了解，这里是[官方文档说明](https://facebook.github.io/react-native/docs/props.html)。简单地讲，`props` 是作为参数传递到子组件的，子组件通过接收不同的 `props` ，结合组件已有的通用功能或是样式，达到组件复用效果。当组件内部需要更新某些状态的时候，这时候则需要使用到 `state` 。 ### 无状态组件（Stateless Functional Component） 在大部分情况下，封装的组件都不需要自己维护内部状态，只当做 UI 展示组件，由外部传入的 `props` 来决定不同的渲染效果。在这种情况下，我们应当优先选择无状态组件，这里只用 ES6 语法作为示例： ``` -js /* * StaticCell.js...