React Native最新教程.pptx

第 1 章 官网首页 | 7React Native 官网首页介绍React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为 任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。React Native 入门原生的 iOS 组件有了 ReactNative，你可使用标准平台组件，比如 iOS 平台上的 UITabBar 和 UINavigationController。这可 以让你的应用程序拥有和原生平台一致的外观和体验，并保持较高的品质。使用相应的 React 组件，如 iOS 标 签栏和 iOS 导航器，这些组件可以轻松并入你的应用程序中。var React = require(react-native);var { TabBarIOS, NavigatorIOS } = React; var App = React.createClass({render: function() { return (TabBarIOSTabBarIOS.Item title=React Native selected={true}NavigatorIOS initialRoute={{ title: React Native }} //TabBarIOS.Item/TabBarIOS);},});异步执行JavaScript 应用代码和原生平台之间所有的操作都是异步执行，并且原生模块也可以使用额外线程。这意味着我 们可以解码主线程图像，并将其在后台保存至磁盘，在不阻塞 UI 的情况下进行文本和布局的估量计算，等 等。因此，React Native 应用程序的流畅度和响应性都非常好。通信也是完全可序列化的，当运行完整的应用程 序时，这允许我们使用 Chrome Developer Tools 来调试 JavaScript，或者在模拟器中，或者在真机上。见 调试第 1 章 官网首页 | 8图片 1.1 chrome-breakpoint触摸处理iOS 有一个非常强大的系统称为 Responder Chain，可以用来响应复杂视图层级中的事件，但是在 Web 中并没有 类似功能的工具。React Native 可实现类似的响应系统并提供高水平的组件，比如 TouchableHighlight，无需 额外配置即可与滚动视图和其他元素适度整合。var React = require(react-native);var { ScrollView, TouchableHighlight, Text } = React; var TouchDemo = React.createClass({render: function() { return (ScrollViewTouchableHighlight onPress={() = console.log(pressed)}TextProper Touch Handling/Text/TouchableHighlight/ScrollView);},});第 1 章 官网首页 | 9弹性框和样式布局视图应该是简单的，所以我们将 Web 平台上的弹性框模块引入了 React Native。弹性框可用来搭建最常用 的 UI 布局，比如代用边缘和填充的堆叠和嵌入。React Native 还支持常见的 Web 样式，比如 fontWeight 和 StyleSheet 抽象，它们提供了一种优化机制来宣称你所有的样式和布局在组件中的应用是正确的，且组件把它们 应用到了内网中。var React = require(react-native);var { Image, StyleSheet, Text, View } = React; var ReactNative = React.createClass({render: function() { return (View style={styles.row}Imagehttp://facebook.github.io/react/img/logo_og.pngsource={{uri:http://facebook.github.io/react/img/logo_og.png http://facebook.github.io/react/img/logo_og.pnghttp://facebook.github.io/react/img/logo_og.p