React-Native 样式、布局、绘制
发布网友
发布时间：2023-04-10 05:42
共1个回答
热心网友
时间：2023-05-05 14:13
HTML 语言：负责网页的结构，又称语义层
CSS 语言：负责网页的样式，又称视觉层
JavaScript 语言：负责网页的逻辑和交互，又称逻辑层或交互层
这在往日都是好的实践推荐。但是这几年组件化和模块化开发思维渐行其道（特别是React出来后，打破了这一原则，React的基础组织单元是组件，强制要求把html、css、js写在一起），特性或者功能粒度成为一种软件设计和开发上的选择。
那么，在实际开发中，有没有一种超集可以贯穿三者呢？ 有，jsx和typescript就是，jsx与typescript是两个不同的概念，但都是一种语法糖，都是JavaScript的超集合，typescript1.6版本是支持jsx的，在react中会用jsx（write css in js、write “html” in js）来开发组件，React-native是react的扩展，在组件开发上也是用的jsx。
component in react-native
在RN中，并不需要学习什么特殊的语法来定义样式，使用JavaScript来写样式。样式名（属性）基本上遵循的是CSS的命名 和规则（比如后定义覆盖原则、样式表现等），只是按照JS的语法要求，某些样式名需要用驼峰命名法（比如css中的background-color 需写成“backgroundColor”）。
样式的定义有两种方式：
内联方法： style={{color: red}}
样式生成器: : styleSheet.creat({textColor: {color: red}})
在RN中，核心组件都有一个名为style的属性，样式在RN中的应用就是给该属性赋值。属性的值可为JavaScript中的对象（｛color：red｝），或者数组([{color: red}, {color: blue}])。
RN中的组件（基础组件、RN中提供的组件）所能应用的样式有一定的范畴，比如color样式不能应用在View组件中。识别哪些组件有哪些可用的样式有两种方法：1，去网上或者官网查。2，调试时打开warn提醒，应用一个样式，如果该组件没有该样式，则会有告警。告警里面会列出该组件所能应用到的样式集合。
在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。RN中的Flexbox规则和Web中Css FlexBox基本一致，主要的不同就是flex-direction默认不同，css中默认是水平方向，rn中默认是垂直方向。具体的flexbox布局相关的知识可以参考我之前写的一篇文章《盒模型与布局》
Web中页面的绘制是浏览器器UI后端做的，而在RN中则是交由原生去绘制（例如ios中的UIkits，具体RN和原生的交互和通讯可以参考我之前写的另外一篇文章《React-Native原理解析与通讯机制阐述（Eg：ios）》），这里只做简单的浅析和对比。
UI Backend就是绘制页面图层的模块。
简单说就是Native初始化 -> 加载JS，JS端注册组件 ->端上调用JS端run方法，传入入口组件名称 -> JS端启动渲染流程。
创建： ReactNative的UI组件通过requireNativeComponent->createReactNativeComponentClass->ReactNativeBaseComponent下mountComponent的调用关系，最终在mountComponent中调用UIManager（Native Mole）组件创建View：UIManager.createView(tag, this.viewConfig.uiViewClassName, nativeTopRootTag, updatePayload);，在Native端，UIManager调用对应组件类型的ViewManager（单例，管理类）创建实例。
更新：属性--样式同步，也就是re-render的过程，在这过程中会调用ReactNativeBaseComponent下receiveComponent->UIManager.updateView完成。
参考： https://github.com/*/react-native/ http://*.github.io/react-native/ http://www.jianshu.com/p/17d6f6c57a5c
