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太粗