RN Start For Android.pptxVIP

RN Start For Android杨鑫目录RN是什么RN的架构RN的初探RN的语法RN的开发和调试RN的生命周期RN的模块和UI组件RN的第三方库RN的动画和手势RN的性能RN的维护成本RN的优缺点RN的思考目录RN是什么RN的架构RN的初探RN的语法RN的开发和调试RN的生命周期RN的模块和UI组件RN的第三方库RN的动画和手势RN的性能RN的维护成本RN的优缺点RN的思考RN是什么Native/H5/Hybrid/React NativeReact NativeFacebook 3.26 for iOS, 9.15 for AndroidRN是什么RN是什么显示AndroidiOSRN是什么不是HTML5,不是WebView,不是跨平台那它究竟是什么？Learn once, Write anywhereWeb技术Native体验目录RN是什么RN的架构RN的初探RN的语法RN的开发和调试RN的生命周期RN的模块和UI组件RN的第三方库RN的动画和手势RN的性能RN的维护成本RN的优缺点RN的思考RN架构（逻辑架构）ReactVirtual DOMAndroidiOSWeb RN架构（与Native通信）JSCore(JS/JSX)BridgeRegisterAndroid Framework目录RN是什么RN的架构RN的初探RN的语法RN的开发和调试RN的生命周期RN的模块和UI组件RN的第三方库RN的动画和手势RN的性能RN的维护成本RN的优缺点RN的思考RN的初探（基本配置）Mac/Windows/LinuxNode 4.0或以上（RN使用到了ES6语法特性）Android 4.1或以上Build-tools version 23.0.1或以上RN的初探安装RN工具 $ nvm install –g react-native-cli $ react-native -v # 当前最新版是0.1.7 $ react-native -h # 查看帮助 创建RN项目 $ react-native init ProjectName $ react-native run-android RN的初探（项目结构）Android项目RN Android入口RN iOS入口iOS项目Npm依赖包包的基本信息目录RN是什么RN的架构RN的初探RN的语法RN的开发和调试RN的生命周期RN的模块和UI组件RN的第三方库RN的动画和手势RN的性能RN的维护成本RN的优缺点RN的思考RN的语法（基础）Require：引入模块React.createClass创建组件类Render方法渲染视图JSX = JS +XMLAppRegister注册应用入口StyleSheet.Create创建样式命名规则：驼峰RN的语法（组件化）RN的语法（布局）CSS样式和web大体一致Flex:弹性布局 《/blog/2015/07/flex-grammar.htmlFlex/blog/2015/07/flex-grammar.html布局教程：语法篇》 《/blog/2015/07/flex-examples.htmlFlex/blog/2015/07/flex-examples.html布局教程：实例篇》目录RN是什么RN的架构RN的初探RN的语法RN的开发和调试RN的生命周期RN的模块和UI组件RN的第三方库RN的动画和手势RN的性能RN的维护成本RN的优缺点RN的思考RN的开发和调试（工具）开发工具Sublime + babel插件（推荐）Atom + Nuclide插件（暂不推荐）调试工具安装React Dev的Chrome插件模拟器或真机菜单选择Debug JSChrome浏览器会自动访问下面网址，开始调试 http://localhost:8081/debugger-uiRN的开发和调试（高效Debug）Shell终端模拟器AppHttp Serverrequest:/index.android.bundleresponse:/index.android.bundleInstall RunDebug ApkNewBuildreact-native run-androidRN的开发和调试（Native入口）ReactInstanceManagerReactRootView目录RN是什么RN的架构RN的初探RN的语法RN的开发和调试RN的生命周期RN的模块和UI组件RN的第三方库RN的动画和手势RN的性能RN的维护成本RN的优缺点RN的思考RN的生命周期开始1.组件绘制阶段componentWillMountgetInitialStaterendercomponenDidMount2.组件运行与交互阶段运行中props改变compone