React Native之原理浅析
原文链接 UI的描述和呈现分离开了 Javascript在react native里面非常重要 React Native它可不一样 React Native组件结构 在一定程度上，React Native和NodeJS有异曲同工之妙。它们都是通过扩展JavaScript Engine, 使它具备强大的本地资源和原生接口调用能力，然后结合JavaScript丰富的库和社区和及其稳定的跨平台能力，把javascript的魔力在浏览器之外的地方充分发挥出来 JavaScriptCore + ReactJS + Bridges 就成了React Native RCTRootView做的事情如下 React Native的初始化分为几个步骤 这里需要提一下的是 JS Engine不直接管理UI的绘制 | - (NSDictionary *)constantsToExport { return @{ @"firstDayOfTheWeek": @"Monday" };// JS里面可以直接调用 ModuleName.firstDayOfTheWeek获取这个常量 } | 内部机制 JS用时序 Java层核心类及原理，如下所示 ReactContext ReactInstanceManager ReactRootView CatalystInstance JavaScriptModule NativeModule JavascriptModuleRegistry NativeModuleRegistry CoreModulePackage Java 调用Js Js 调用Java
什么是react native 开发
React-Native是：Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台，同年9月份，该开源项目同时支持Android平台。
React Native的原理是：在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以取代，以替代等。
react-native的常用组件及api
可用于flex布局使用 必须把文本节点放到Text中，否则会报错，Text组件内的子组件不支持flex布局 Android 是不支持 GIF 和 WebP 格式,你需要在android/app/build.gradle文件中根据需要手动添加 网络和 base64 数据的图片需要手动指定尺寸 在安卓中，如果使用图片大小远大于Image的图片会触发内存泄漏，只需要设置 Image 组件的 resizeMethod 属性为 resize 即可 提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等 能够配置出类似textarea、password，其他的多选、单选、下拉框等input类型需要引入第三方插件 https://www.jianshu.com/p/a7609fce8da4 ScrollView 实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作） 一般来说我们会给 ScrollView 设置flex: 1以使其自动填充父容器的空余空间 Virtualized List 放在 ScrollView 中，ScrollView 是要全部渲染的，那么 Virtualized List 就计算不出来哪些 Cell 目前显示在屏幕上，会渲染所有的 Cell，那么它的优势就显现不出来了会报警告，所以尽量不要用ScrollView嵌套FlatList和SectionList 解释为什么不能嵌套 https://blog.csdn.net/gang544043963/article/details/106525516 ScrollView作为FlatList的父组件的时候，实现上拉加载更多使用onEndReached会无限加载，可以在ScrollView上监听onscroll事件触发加载更多或者不再用ScrollView把ScrollView中的其他内容放到FlatList 的ListHeaderComponent属性中。相见下方FlatList介绍使用。 一般使用 TouchableHighlight 或者 TouchableOpacity 代替 主要针对刘海屏，使用SafeAreaView包裹后，不会在刘海位置渲染页面，以免信息展示不全。 ScrollView的contentInsetAdjustmentBehavior="automatic"也有同样作用,但是滚动时会失效