2017年rn-web的設計與實現.pdf

1、RN-WEB 前端需求Online，MobileNative（IOS，Android），H5，還是Hybrid？React，React-NativeCRN，CRN-web前端需求WHAT S CRN-WEB在React，React-Native基礎之上，結合CRN最終打通項在IOS，Android，H5三端運效果的框架。持以下項類型：YRN項Reactjs項React-Native項CRN項從HELLO WORLD開始import Component from react;import View,Text,AppRegistry from react-native;class HelloWor

2、ld extends Component render()return(HelloWorld )AppRegistry.registerComponent(HelloWorld,()=HelloWorld);Package Tool：react:path.join(_dirname,./././node_modules/ctrip/react),react-native:path.join(_dirname,./././src,/react-native),效果對效果對2效果對3CRN-WEB總體設計CRN-WEB運流程CRN-WEB具體實現1.具與環境 2.組件系統 3.樣式處理系統 4.事

3、件系統，5.打包系統 6.FAQ 1.具與環境Node環境與node插件html5，css，js，ES6，ES7Webpack及其插件，AST,uglifyJSBabel及其插件React,React-Native第三插件2.1組件系統react-native組件系統：30+40+30(19+23)(44)2.2組件系統crn組件系統：703.1樣式處理系統 StyleSheet.create新建個樣式API，將動對樣式進轉換StyleSheet.inject向頁注樣式的APIStyleSheet.flatten將個style數組轉化為個style對象。如果傳的是對象，則直接返回此對象Styl

4、eSheet.fix動抹平瀏覽器差異，對樣式進兼容處理，將進如下處理作：3.2樣式處理系統 fixUnit，基本樣式單位是rem，轉化樣式單位，fixBorder對borderStyle進般化處理fixFlexBox處理flexBox樣式集，動判斷選2009，2011，2012等進兼容性樣式處理fixTransform將rn數組形式的fixed成普通的web格式，處理transformMatrix等fixBoxShadow 處理shadowOffset，shadowRadius，shadowColor，shadowOpacity等等fixPaddingMargin處理paddingHorizo

5、ntal，marginVertical這些樣式fixCssName處理樣式名稱，前綴等4.1事件處理系統 使了PanResponder，它提供個對觸摸響應系統的Responder的可預測的包裝，和React-Native保持致的事件處理流程onStartShouldSetResponder(13)*-onMoveShouldSetPanResponder:(e,gestureState)=.*-onMoveShouldSetPanResponderCapture:(e,gestureState)=.*-onStartShouldSetPanResponder:(e,gestureState)=

6、.*-onStartShouldSetPanResponderCapture:(e,gestureState)=.*-onPanResponderReject:(e,gestureState)=.*-onPanResponderGrant:(e,gestureState)=.*-onPanResponderStart:(e,gestureState)=.*-onPanResponderEnd:(e,gestureState)=.*-onPanResponderRelease:(e,gestureState)=.*-onPanResponderMove:(e,gestureState)=.*-o

7、nPanResponderTerminate:(e,gestureState)=.*-onPanResponderTerminationRequest:(e,gestureState)=.*-onShouldBlockNativeResponder:(e,gestureState)=.4.2組件事件傳遞 4.3事件處理系統 Touchable.webTouchableHighlight.webTouchableNativeFeedback.webTouchableOpacity.webTouchableWithoutFeedback.web5 CRN-WEB打包具 Prepare（Entry，

8、Version，Enviroment,Third Component Check）Webpack(presets,loaders,plugins)Babel(Syntax process,Tree Shaking,Transform)Create（Java project，DotNet project，static project）Setup（Dev，Release，Live Model）Statistic（size，dependency）5.1 CRN-WEB打包具 5.2 CRN-WEB打包具 5.3 CRN-WEB打包具 crn組件系統：705.4 CRN-WEB打包具 6 關于許可協議

9、Facebook官React許可協議解惑0難點：1.對瀏覽器的兼容性問題的處理，答：對瀏覽器的兼容性問題的處理，對于一般性的樣式支持差異問題在Stylesheet.fix中做統一處理，特殊的兼容性問題做特殊處理。2.Reactjs本身太大，答：長期來看和兄弟公司去哪合作，提供Reactjs的替代品；短期內使打包具盡可能優化打包size，使如Treeshake，dead-code-remove，等等技術 3.部分低端機型在滾動中，特別卡頓，答：部分低端機型在滾動中，特別卡頓，對React進優化，批量更新，減少嵌套層級等。4.依賴管理,版本問題等等 答：依賴管理,版本問題等等，先固定版本，后定升級標等等。5.工程量巨大，React-native在變化 答：固定階段性成果，按計劃升級 6.細節打磨 如：chrome 12px，web上1px太粗