1.Weex原理及架构剖析
2.Expo 搭建 React-native 项目代码目录分析
3.å¦ä½è¯ä»· React Native
4.å¦ä½ç¼è¯ReactNative示ä¾ç¨åºExamples
5.ReactNative资源更新增量包的码分优化实践
6.React Native UI界面还原,组件布局与动画效果
Weex原理及架构剖析
早期的码分H5和Hybrid解决方案依赖客户端App内置浏览器(webview),通过前端H5开发实现跨平台应用,码分如PhoneGap、码分cordova和ionic等。码分这些方法简化了开发流程,码分库存管理 网站源码但H5性能与客户端性能存在显著差距。码分Facebook的码分ReactNative引入了新的解决方案,旨在解决这一问题。码分
ReactNative强调“learn once write anywhere”,码分而Weex则提出了“write once run anywhere”,码分在灵活性和适应性上更胜一筹。码分选择Weex的码分开发者可以参考官方文档weex.apache.org/zh/guid...
Weex的架构核心在于初始化阶段创建的JS执行环境,类似于浏览器的码分V8引擎或客户端的JS Core,为所有页面提供共享的码分运行环境,提高性能。weex-vue-framework是基于Vue.js改造的框架,负责将Vue指令转化为原生组件渲染指令,工作指标源码通过前端与原生的分离,优化了性能,如分离业务代码和框架依赖。
通信方面,Weex使用WXBridge实现JS与客户端的双向通信,确保跨环境的顺畅交互。至于Weex的工作原理,主要分为三步:首先将源码转换为类JSON数据结构,处理数据绑定,并定义返回数据的函数原型。这些步骤共同支撑起Weex的跨平台应用开发能力。
Expo 搭建 React-native 项目代码目录分析
创建React-native项目时,Expo提供了多种工具简化开发过程。根据项目需求,选择不同的模板:空白模板(blank)适合演示、组件预览和个人项目;带有底部tab菜单的模板(tabs);需要直接控制原生代码时选择(minimal);遇到未知问题则选择RN方式。[1] React Native的本地外卖源码典型目录结构包括以下几个部分:[2]src:存放组件源代码,是项目开发的核心目录。
test:用于编写和运行组件的测试用例。
demo:包含一个独立的Expo项目,App.js是核心文件,通过引用src中的组件进行展示和开发。
其他文件如.eslintrc.js, babel.config.js, README.md, .gitignore, package.json等,分别负责代码风格规范、编译配置、项目介绍和版本管理。
引入Expo时,需注意src目录与demo目录的配置协调,以确保metro(打包工具)能够正确处理。首先安装Expo CLI,然后创建项目,通过yarn start预览组件。配置metro时,重点在于新版本的yield 源码实现metro.config.js,用于添加providesModuleNodeModules,解决src目录依赖的解析问题。[3] 总结起来,开发过程中App.js是关键,负责组件的集成和展示。app.json和package.json分别用于设置应用配置和依赖管理。assets存放资源文件,babel.config.js用于代码转换,index.js是应用入口,metro.config.js负责项目打包,而yarn.lock则保证了依赖版本的一致性。eas.json则提供了EAS平台的云构建和部署选项。每个文件都有其特定的功能,共同构建React-native项目的开发流程。[4]å¦ä½è¯ä»· React Native
React nativeå åå©ç¨äºFacebookçç°æè½®åï¼æ¯ä¸ä¸ªå¾ä¼ç§çéæä½åï¼å¹¶ä¸æç¸ä¿¡è¿ä¸ªå¢é对å端çäºè§£å¾æ·±å»ï¼å¦åä¸å¯è½è®©Native codeãéå± äºçº¿ãã
对åºå°å端å¼åï¼æ´ä¸ªç³»ç»ç»ææ¯è¿æ ·ï¼
JSX vs HTML
CSS-layout vs css
ECMAScript 6 vs ECMAScript 5
React native View vs DOM
æ éç¼è¯ï¼æå¨ç¬¬ä¸æ¬¡ç¼è¯äºipaè£ å¥½ä»¥åï¼å°±åä¹æ²¡æ´æ°è¿appï¼åªè¦æ´æ°äºç«¯çjs代ç ï¼reloadä¸ä¸ï¼æ´ä¸ªçé¢å°±å ¨åäºã
å¤æ°å¸å±ä»£ç é½æ¯JSXï¼ææNativeç»ä»¶é½æ¯æ ç¾åçï¼è¿å¯¹äºå端ç¨åºåæ¥è¯´ï¼éä½äºä¸å°å¦ä¹ ææ¬ï¼ä¹å¤§å¤§åå°äºä»£ç éãä¸ä¿¡ä½ å¯ä»¥ççJSXç¼è¯åç代ç ã
å¤ç¨Reactç³»ç»ï¼ä¹åå°äºä¸å®å¦ä¹ åå¼åææ¬ï¼æ´éè¦çæ¯å©ç¨äºReactéé¢çåå±ådiffæºå¶ãjså±ä¼ ç»Nativeå±çæ¯ä¸ä¸ªdiffåçjsonï¼ç¶åç±Nativeå°è¿ä¸ªæ°æ®æ å°æçæ£çå¸å±è§å¾ã
css-layoutä¹æ¯ç¹çä¹ç¬ï¼å端å¯ä»¥ç»§ç»ç¨çæçç±»cssæ¹å¼æ¥ç¼åå¸å±ï¼éè¿è¿ä¸ªå·¥å ·è½¬æ¢æconstrainå¸å±ã
ç³»
ç»åªæjs-objcçååè°ç¨ï¼å°±æ¯æåçUIç»ä»¶çæ¹æ³éè¿javascritcoreæè webviewï¼ä½çæ¬iOSï¼æ å°å°jsä¸æ¥ï¼æ´ä¸ªè°ç¨
è¿ç¨æ¯å¼æ¥çï¼è¿æ ·ç设计令React nativeå¯ä»¥è®©jsè¿è¡å¨æ¡é¢chromeä¸ï¼éè¿websocketè¿æ¥Native
codeåæ¡é¢chromeï¼æ大å°æ¹ä¾¿äºè°è¯ãå¯¹å ¶ä¸çæºå¶Bangçä¸ç¯æç« åå¾å¾è¯¦ç»ï¼æå°±ä¸æ¾äººçæ §äºï¼React Nativeéä¿¡æºå¶è¯¦è§£ « bangâs blog ãä½è¿æ ·è®¾è®¡ä¹ä¼å¸¦æ¥ä¸äºé®é¢ï¼åé¢è¯´ã
ç¹ææä½ä¹è¢«æ½è±¡æäºä¸ç»ç»ä»¶ï¼TouchableXXXï¼ï¼è¿ç§æ½è±¡æ¹å¼æ¯æå¨ä¹åå类似工ä½ä¸æ²¡ææ³å°çãfacebookè¿ååºNative为ä»ä¹åwebãææãä¸åçåå ï¼å®æ¶çç¹æåé¦ååæ¶è½åãReact Native è¿å¥ç¸åºæºå¶è®¾è®¡å¾å¾å®åï¼è½åNative codeé£æ ·æ§å¶æ´ä¸ªç¹ææä½çææè¿ç¨ã
Debug
ç¸å½æ¹ä¾¿ï¼ä¿®æ¹äºjs以åï¼éè¿å 建çnodejs
watcherç¼è¯æbundleï¼å¨æ¨¡æå¨éé¢æcmd+rå°±å¯ä»¥çå°ææãèä¸æcmd+dï¼å¯ä»¥æå¼ä¸ä¸ªchromeçªå£ï¼ææçjsé½ç§»å°äº
chromeéé¢è¿è¡ï¼æ以ä»ä¹æç¹åæ¥æè°ç¨æ ï¼é½ä¸å¨è¯ä¸ã
ä¸é¢çæ¢æ¯ç¹ç¹ä¹æ¯ä¼ç¹ï¼ä¸é¢è¯´è¯´ç¼ºç¹ï¼æè åºè¯¥è¯´ï¼ãä»ç¶éççé®é¢ãï¼å¨æçæ¥ï¼è¿ä¸ªæ¹æ¡å·²ç»è¶ è¶äºHybirdæ¹æ¡ã
ç³»
ç»ä»ç¶ï¼ä¸å¾ä¸ï¼ä¾èµåçç»ä»¶æ´é²åºæ¥çç»ä»¶åæ¹æ³ã举两个ä¾åï¼ScrollViewè¿ä¸ªç»ä»¶ï¼å¨Nativeå±æ¯æ大éäºä»¶
çï¼scrollViewWillBeginDraggingï¼
scrollViewWillEndDraggingï¼scrollViewDidEndDraggingççï¼è¿äºäºä»¶å¨ç°æççæ¬é½æ²¡ææ´é²ï¼åºæ¬ä¸
åä¸äºç»ä»¶èå¨ææãå¦å¤ï¼è¿ä¸ªçæ¬ä¸æ大éç»ä»¶æ¯iOS
onlyçï¼ActivityIndicatorIOSãDatePickerIOSãNavigatorIOSãPickerIOSã
SliderIOSãSwitchIOSãTabBarIOSãAlertIOSãAppStateIOSãLinkingIOSã
PushNotificationIOSãStatusBarIOSãVibrationIOSï¼åè¿æ¥çï¼å©ä½çé½æ¯ä¸äºæ½è±¡ç¨åº¦æ强çåºæ¬ç»ä»¶ãè¿
æ ·ï¼ç¨æ·å¿ é¡»å¨ä¸åçå¹³å°ä¸å两å¥ä»£ç ï¼èä¸ææè½åä»ç¶å¼ºçä¾èµ React native å¼å人åæ´é²çæ¥å£ã
ç±äºæå¤å±æ¯
Reactï¼å次å¦ä¹ ææ¬é«ï¼ä¸åå¾å¸¸çHybirdæ¹æ¡ï¼åªè¦å¤å¦å 个JS
APIå°±å¯ä»¥å¼å§å¹²æ´»äºãå½ç¶ï¼Reactç确让åç»å¼ååå¾ç®åäºä¸äºï¼è¿ä¹ä¸å¥å¤æ¥çï¼åºäºiOSï¼ãæ®ç¼ºä¸å ¨çï¼css-layoutï¼å¨
Reactçå è£ ä¸ï¼çç¡®æ¾å¾ä¸é£ä¹é¢ç®å¯æäºã
å¦å¤ï¼React Nativeä»ç¶å¾ä¸å®åãææ¡£è¿ä¸å ¨ï¼æåºæ¬ä¸æ¯ççä»ç示ä¾ä»£ç å®æçdemoï¼éæå°å·²æappçææ¡£ä¹æ¯ä»å¤©æåºæ¥ãæç §å®æ¹ç说æ³ï¼Androidçæ¬è¦å°åå¹´åæåå¸ï¼Blog | React ï¼å±æ¶æ´ä¸ªç³»ç»è®¾è®¡å¯è½è¿ä¼æå¾å¤§çååã
PSï¼å¨ä½¿ç¨Tabbarçæ¶åï¼ææåçåç°ä»ä»¬å± ç¶ç¨äºiconfontæ¹æ¡ï¼æç°å¨æ头ç项ç®ä¸ä¹æåæ ·çå®ç°ï¼ä¸è¿APIæä¹è®¾è®¡ä¸ç´å¾å¤´ç¼ãç»æï¼æåç°ä»æ¯è¿ä¹åçï¼
<TabBarItemIOS
name="blueTab"
icon={ _ix_DEPRECATED('favorites')}
....>
å¨ _ix_DEPRECATED çå®ä¹å¤ï¼æä¸å¥æ³¨éï¼ // TODO(nicklockwood): How can this fit our require system?
以ä¸ã
ä¸é¢æ¯ä¸å¨åï¼å¨React nativeè¿æ²¡å¼æºçæ¶åï¼éè¿å解ipaçä¸äºåæè¿ç¨ï¼æå ´è¶£çå¯ä»¥ççã
------------------------ç®åç²æ´çåå²çº¿--------------------
èæ¯åè°ç æ段
React
Nativeè¿æ²¡å¼æºï¼æè¿åç»éå å¼ãåç¼è¯ãäºFacebook Groupï¼è¿ä¸ªåºç¨æ¯ç¨React
Nativeå®ç°çï¼çipa代ç ï¼åºæ¥å ç¾ä¸ªJSæ件ï¼æ ¼å¼åä¸ä¸ï¼è±äºå 天æ¶é´è¯»äºä¸ä¸æºç ï¼å¯¹React
Nativeçå é¨æ ¸å¿æºå¶ç®æ¯æäºä¸ä¸ªåºæ¬äºè§£ã
React Nativeçæ ¸å¿å®ç°ï¼
å ç®å说å ç¹ï¼è¯¦ç»ççå头æ´æ°ã
1. React Nativeéé¢æ²¡æwebviewï¼è¿è´§ä¸æ¯Hybrid appï¼éé¢æ§è¡JSæ¯ç¨ç
JavascriptCoreã
2. å说React Nativeçæ ¸å¿ï¼iOS Native codeæä¾äºåæ¥ä¸ªæåºæ¬æ ¸å¿çç±»ï¼RCTDeviceEventEmitterã
RCTRenderingPerfçï¼ãæç»ä»¶ï¼RCTViewãRCTTextFieldãRCTTextViewã
RCTModalFullscreenViewçï¼ï¼ç¶åç±React NativeçJSé¨åï¼ç»æäºåæ¥ä¸ªåºæ¬ç»ä»¶ï¼PopoverãListviewçï¼ï¼äº¤ç±ä¸å±çä¸å¡æ¹æ¥ä½¿ç¨ï¼THGroupViewï¼ã
3. å°±å¦ä»ä»¬å¨å®£ä¼ æ¶æ说ï¼ä»ä»¬å®ç°äºä¸å¥ç±»ä¼¼cssçåéï¼ç¨æ¥è§£å³æ ·å¼é®é¢ï¼ç¸å½å¤æå强大ï¼é è¿ä¸ªæè½å°Nativeçæ ¸å¿ç»ä»¶ç»æJSå±çåºæ¬ç»ä»¶åç»æä¸å¡ç«¯çä¸å¡ç»ä»¶ï¼åºè¯¥æ¯éç¨facebook/css-layout · GitHubçCè¯è¨çæ¬å®ç°çï¼å¨pptä¸æ们çå°äºç±»ä¼¼flex-direction: columnä¸ç±»ç代ç ï¼è¿ä¸ªæ£æ¯css-layoutæ¯æçè¯æ³ï¼ã
4. å¨React Nativeä¸ï¼åJSçå·¥ç¨å¸è§£å³çæ¯ãå°åºæ¬ç»ä»¶æ¼è£ æå¯ç¨çReactç»ä»¶ãçé®é¢ï¼åNative Codeçå·¥ç¨å¸è§£å³çæ¯ãæä¾æ ¸å¿ç»ä»¶ï¼æä¾è¶³å¤çæ©å±æ§ãçµæ´»æ§åæ§è½ãçé®é¢ã
React Nativeç设计èèï¼
ReactJS对React Nativeæçç´æ¥çå½±åï¼æ没å¨ç产ç¯å¢ä¸ç¨è¿Reactï¼åªçè¿ä»£ç &ç¨è¿Angularï¼å¦ææ误请æåºï¼
ReactJSéé¢æè¿æ ·ç设计ï¼
1. ReactJS ç大工åå ¥å£createElementè¿åçä¸æ¯æ个å®ä½DOM对象ï¼èåªæ¯ä¸ä¸ªæ°ç»
2. éè¿æºç ä¸ ui/browser/ ç®å½ä¸ç代ç ï¼å°è¿ä¸ªæ°ç»è½¬æ¢æDOM
3. åºå±ç渲ææ ¸å¿æ¯å¯ä»¥æ´æ¢ç
å¦å¤ï¼Facebookèªå·±æJSXï¼css-layoutçå¼æºé¡¹ç®ï¼åºäºè¿äºï¼å¦æè¦åä¸ä¸ªç¨ JSæ¥å¼åNative appçä¸è¥¿ï¼å¾èªç¶å°±æ³å°äºä¸å¥æææççææ³ï¼
1. å° ui/browser éé¢ç代ç æ¿æ¢æä¸å¥ Native çæ¡¥æ¥JSï¼å®é ä¸ï¼iOSçæ¯éè¿
injectGenericComponentClassæ¹æ³ï¼å°æ ¸å¿ç»ä»¶çæ¹æ³æ³¨å ¥å°JSéé¢ ï¼ï¼å°±ç´æ¥å¤ç¨ReactçMVVMï¼èªå¨å°æ°æ®æ å°å°Nativeäº
2.
Native
codeéé¢å®ç°ä¸ç»æ ¸å¿APIï¼ä¸ç»æä¾æ ¸å¿ç»ä»¶çAPIï¼createãupdateãdeleteï¼ï¼ä¸ç»äºä»¶æ¹æ³ï¼ReactJSéé¢ç
EventEmitter ï¼ï¼ä¸ç»å¯¹cssè¿è¡è§£æï¼css-layoutï¼ä»¥åè¿åStyleçComputedStyleï¼React
Nativeéé¢å«meatureStyleï¼ã
è¿æ ·ï¼ç¨ä¸äºReactJSæ¬èº«çæææ ¸å¿åè½å设计æè·¯ï¼Nativeçå¼åä¹è¶³å¤ç®åã
é£ï¼React Nativeæ¯ä»ä¹ï¼
å ¶å®è¿ä¸è¥¿ä»Nativeå¼åæ¥è¯´ï¼ç¸å½äºéæ°åæäºä¸ä¸ªæµè§å¨æ¸²æå¼æ并ä¸å¥ä¸ä¸ªReactç壳ï¼ä»Webå¼åè§åº¦æ¥è¯´ï¼å°±æ¯æåæ¥Reactçå端æ¢æäºNative codeæ¥å®ç°ï¼å°±è·Flipboardæè¿æçReact Canvas ä¸æ ·ï¼ Flipboard · GitHubreact-canvas
React Nativeçä¼å¿åå£å¿ï¼ï¼
ä¼å¿ç¸å¯¹Hybird appæè Webappï¼
1. ä¸ç¨Webviewï¼å½»åºæè±äºWebview让人ä¸ç½ç交äºåæ§è½é®é¢
2. æè¾å¼ºçæ©å±æ§ï¼è¿æ¯å 为Native端æä¾çæ¯åºæ¬æ§ä»¶ï¼JSå¯ä»¥èªç±ç»å使ç¨
3. å¯ä»¥ç´æ¥ä½¿ç¨Nativeåççãçé¼ãå¨ç»ï¼å¨FB Groupè¿ä¸ªappéé¢ï¼é¢æ¿æ»åºå¸¦ä¸ç¹æå»å¼¹å¨ï¼é¢æ¿åºäºæ个ç¹å±å¼è¿ç§å¨ç»éå¤å¯è§ï¼è¿ç§å¨ç»ç¨Native codeæ¥åå°èä¸ç¢ï¼ä½æ¯ç¨Webæ¥åå°±é¾ä¸å é¾ï¼ã
ä¼å¿ç¸å¯¹äºNative appï¼
1. å¯ä»¥éè¿æ´æ°è¿ç«¯JSï¼ç´æ¥æ´æ°appï¼ä¸è¿è¿å¿«æ为å家大åNative appçæ é äºâ¦
å£å¿ï¼
1. æ©å±æ§ä»ç¶è¿è¿ä¸å¦webï¼ä¹è¿è¿ä¸å¦ç´æ¥åNative codeï¼è¿ä¸ªä¸ç¨åºè¯è§£éäºå§ï¼
2.
ä»Nativeå°Webï¼è¦åå¾å¤æ¦å¿µè½¬æ¢ï¼å¿å¿ é æåæ¹é½è¦å¦¥åãæ¯å¦webè¦ç¨ä¸å¥CSSçéå²çï¼Nativeéè¿css-layoutæ¿å°æç»æ ·
å¼å转æ¢ænativeåçç表达æ¹å¼ï¼æ¯å¦iOSçConstraint\origin\Centerçå±æ§ï¼ï¼åæ¯å¦å¨ç»ãå¦å¤ï¼è¥Androidå
iOSé½è¦åç¸åçå°è£ ï¼æ¦å¿µè½¬æ¢å°±æ´å¤æäºã
æ´æ°1ï¼æ·»å äºReact对React Nativeçå½±åã
æ´æ°2ï¼åºæ¬ç¡®å®å ¶ä½¿ç¨äº css-layoutï¼æ·»å äºå¯¹React Nativeçæ»ç»
æ´æ°3: React nativeå·²ç»å¼æºäºï¼ React Nativeï¼åªæiOSçãæåäºå 个demoï¼ç®åçäºçobjc代ç 并åå¼æºåçæ们çä¸äºç»è®ºï¼è§åæï¼äº¤åéªè¯ãç®åå°ä»å端工ç¨å¸åç³»ç»æ´ä½è§åº¦è¯´ä¸ä¸React nativeçç¹ç¹åä¼å£å§ã
æ´æ°4: è¡¥å äºå æ¡ä¼å¿åä¸å端å¼åçå¯¹ç §
å¦ä½ç¼è¯ReactNative示ä¾ç¨åºExamples
ããç¼è¯ç¤ºä¾ç¨åºéè¦å°æ´ä¸ªé¡¹ç®å¯¼å ¥å°androidStudioä¸ï¼androidStudioå¯¼å ¥é¡¹ç®æ¶éæ©react-native/ReactAndroidç®å½ã
ããç±äºé¡¹ç®ä¾èµndkå æ¤å¦æè¦ç¼è¯Examplesè¿éè¦å®è£ é ç½®ndkç®å½ï¼ä¸è½½ndkåæ¯ä¸ä¸ªèªè§£åç¨åºï¼ä¼éæ¾ndkçç®å½ã
ããç¶åéè¦è®¾ç½®ç¯å¢åéæè å¨react-nativeæ ¹ç®å½ä¸æ°å»ºlocal.propertiesæ件ï¼æ件å 容å¦ä¸ï¼
ããsdk.dir=c:\ä½ çsdkç®å½
ããndk.dir=c:\ä½ çndkç®å½
ãã设置è¦ä¹åå°±å¯ä»¥ç¼è¯äºï¼å¯¼å ¥åç¼è¯çè¿ç¨æ¯è¾æ²æï¼è¯·ç»§ç»çä¸æã
ããå¨ç¼è¯AwesomeProject项ç®æ¶ï¼æ²¡æç¨å°ndkï¼å®é ä¸è¿éçndké»è®¤æ åµä¸å¹¶æ²¡æç¨å°ï¼åªæ¯gradleç设置éændkå æ¤å¿ é¡»é ç½®ndkæè½å¯¼å ¥é¡¹ç®ã
ããndkæ¯å¨ç¼è¯æ ¸å¿åºæ¯æç¨å°ï¼æ ¸å¿åºä½äºreact-native/ReactAndroidï¼å¯¼å ¥æ´ä¸ªé¡¹ç®æ¶ä»¥libå½¢å¼åå¨ãæ¥çExamplesç®å½ä¸UIExplorerï¼ä¼åç°å¨build.gradleæ¯ä»¥å¨çº¿çæ¹å¼å¯¼å ¥æ ¸å¿åºçãéè¿æºç çæ¹å¼å¯¼å ¥è¢«æ³¨éæäºã
ããdependencies {
ããcompile fileTree(dir: 'libs', include: ['*.jar'])
ããcompile 'com.android.support:appcompat-v7:.0.1'
ãã// Depend on pre-built React Nativecompile 'com.facebook.react:react-native:0..+'
ãã// Depend on React Native source.
ãã// This is useful for testing your changes when working on React Native.
ãã// compile project(':ReactAndroid')
ãã}
ããç±æ¤å¯ç¥ï¼ç¼è¯UIExplorer并ä¸éè¦ndkï¼å¦æä½ ä¸æ³è®¾ç½®ndkï¼æ2个åæ³
ãã1.æ·è´AwesomeProject项ç®ä¸çbuild.gradleï¼settings.gradleå°UIExplorerçandroidç®å½ï¼å¨å¯¼å ¥é¡¹ç®æ¶éæ©UIExplorer/androidå°±å¯ä»¥äºï¼è¿æ ·androidStudioä¼å¯¼å ¥å个项ç®ï¼å¦åä¼å¯¼å ¥æ´ä¸ªé¡¹ç®ã
ãã2.ç¨androidStudioæ°å»ºä¸ä¸ªååç项ç®ï¼ç¶åæUIExplorerç®å½ä¸çæ件æ·è´å°æ°å»ºç项ç®ä¸ã
ããç¼è¯å¥½ä¹åå¯å¨æå¡å¨ç«¯ï¼å°react-nativeç®å½ä¸æ§è¡:
ããnpm install
ããnode packager\packager.js
ããwindowsä¸å¦æåºç°é误éè¦æ ¹æ®é误æ示修æ¹ä»£ç blogs.com/zhaojietec/p/.html
ããä¸è¿éè¦æ³¨æçæ¯ï¼ç®å为æ¢ï¼UIExplorerå¨Androidä¸æä¸ä¸ªbugï¼IOSä¸æ²¡æé®é¢ï¼éè¿googleå¯ä»¥æ¾å°äºè§£å³åæ³ã/post/
React Native UI界面还原,组件布局与动画效果
React Native UI和写Android XML布局布局在本质上相似,个人感觉差异不大。圣诞表白源码
在《ReactJS到React-Native,架构原理概述》中提到,在web环境中,React框架,JSX源码通过React框架最终渲染到了浏览器的真实DOM中。而在React Native框架中,JSX源码通过React Native框架编译后,通过对应平台的Bridge实现了与原生框架的通信。如果在程序中调用了React Native提供的API,那么React Native框架就通过Bridge调用原生框架中的方法。底层为React框架,UI层变更映射为虚拟DOM进行diff算法,diff算法计算出变动后的JSON映射文件,最终由Native层将此JSON文件映射渲染到原生App的页面元素上,实现了通过控制state和props的变更引起iOS与Android平台UI的变更。编写的React Native代码最终会打包生成一个main.bundle.js文件供App加载,此文件可以在App设备本地,也可以存放于服务器上供App下载更新。Yoga是一个使用C语言实现的CSS3/Flexbox的跨平台布局引擎,旨在打造一个兼容iOS、Android、Windows平台在内的布局引擎,让界面布局更加简单。Yoga通过实现许多设计师熟悉的API并对外开放。利用Yoga,目前已经被用于React Native和Weex等开源项目中,虽然只实现了W3C标准的一个子集,但在样式方面也有一定的应用。
核心组件和API在React Native中可以通过reactnative.cn/docs/components/查找。为了给React-Native组件加上样式,需要在JavaScript中添加样式表。Flexbox是构建响应式App的最佳选择,虽然CSS在React Native中的表现不太一致,且React Native并不是为web元素设计的,不能像web应用在html中使用CSS。但Weex在这方面具有优势。React和宿主平台之间的桥接包含了一个缩减版CSS子集的实现,主要通过flexbox进行布局。使用内联样式,通过JavaScript对象进行样式组织,这也是React团队先前在Web环境中推荐的。对于复杂的样式,建议使用StyleSheet.create来集中定义组件的样式,这可以弥补编写复杂样式时不能使用CSS的不便。
RN中的宽高可以直接通过style指定,尺寸是无单位的,表示与设备像素无关的逻辑像素点。在组件样式中使用flex可以使组件在可利用的空间中动态地扩张或收缩。与Android LinearLayout的layout_weight类似,值越大,组件获取剩余空间的比例越多,但RN的优先级高于width。使用flex布局,可以与Android类似地调整组件的优先级。
在动画方面,React Native提供了两个互补的动画系统:用于创建精细交互控制的Animated和用于全局布局动画的LayoutAnimation。Animated旨在以声明的形式定义动画的输入与输出,建立一个可配置的变化函数,通过start/stop方法控制动画的执行顺序。配置动画具有高度灵活性,包括自定义或预定义的easing函数、延迟、持续时间、衰减系数、弹性常数等。配置动画时,可以通过parallel、sequence、stagger和delay组合使用多个动画。默认情况下,如果任何一个动画停止或中断,组内所有其他动画也会停止,但可以设置stopTogether属性禁用自动停止。合成动画值可以通过加减乘除以及取余等运算来创建新的动画值。插值可以在动画属性中设置值变化区间,如在接近特定值时改变动画行为。跟踪动态值可以通过设置toValue来实现,同时跟踪多个值。通过启用原生驱动,动画可以在启动前将所有配置信息发送到原生端,利用原生代码在UI线程执行动画,而无需在两端间频繁沟通,从而避免了JS线程被卡住时影响动画的问题。
LayoutAnimation允许在全局范围内创建和更新动画,这些动画会在下一次渲染或布局周期运行,特别适用于更新flexbox布局。使用LayoutAnimation时,注意它对动画本身的控制不如Animated或其它动画库方便,因此在使用时应谨慎考虑。如果要在Android上使用LayoutAnimation,需要在UIManager中启用。