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)=.*-