React Native最新教程

ReactNative官网首页介绍ReactNative使你能够使用基于JavaScript和React一致的开发体验在本地平台上构建世界一流的应用程序体验。ReactNative把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook在多个应用程序产品中使用了ReactNative，并将继续为ReactNative投资。ReactNative入门原生的iOS组件有了ReactNative，你可使用标准平台组件，比如iOS平台上的UITabBar和UINavigationController。这可以让你的应用程序拥有和原生平台一致的外观和体验，并保持较高的品质。使用相应的React组件，如iOS标签栏和iOS导航器，这些组件可以轻松并入你的应用程序中。varReact=require('react-native');var{TabBarIOS,NavigatorIOS}=React;varApp=React.createClass({render:function(){return(TabBarIOSTabBarIOS.Itemtitle=ReactNativeselected={true}NavigatorIOSinitialRoute={{title:'ReactNative'}}//TabBarIOS.Item/TabBarIOS);},});异步执行JavaScript应用代码和原生平台之间所有的操作都是异步执行，并且原生模块也可以使用额外线程。这意味着我们可以解码主线程图像，并将其在后台保存至磁盘，在不阻塞UI的情况下进行文本和布局的估量计算，等等。因此，ReactNative应用程序的流畅度和响应性都非常好。通信也是完全可序列化的，当运行完整的应用程序时，这允许我们使用ChromeDeveloperTools来调试JavaScript，或者在模拟器中，或者在真机上。见调试第1章官网首页|7图片1.1chrome-breakpoint触摸处理iOS有一个非常强大的系统称为ResponderChain，可以用来响应复杂视图层级中的事件，但是在Web中并没有类似功能的工具。ReactNative可实现类似的响应系统并提供高水平的组件，比如TouchableHighlight，无需额外配置即可与滚动视图和其他元素适度整合。varReact=require('react-native');var{ScrollView,TouchableHighlight,Text}=React;varTouchDemo=React.createClass({render:function(){return(ScrollViewTouchableHighlightonPress={()=console.log('pressed')}TextProperTouchHandling/Text/TouchableHighlight/ScrollView);},});第1章官网首页|8弹性框和样式布局视图应该是简单的，所以我们将Web平台上的弹性框模块引入了ReactNative。弹性框可用来搭建最常用的UI布局，比如代用边缘和填充的堆叠和嵌入。ReactNative还支持常见的Web样式，比如fontWeight和StyleSheet抽象，它们提供了一种优化机制来宣称你所有的样式和布局在组件中的应用是正确的，且组件把它们应用到了内网中。varReact=require('react-native');var{Image,StyleSheet,Text,View}=React;varReactNative=React.createClass({render:function(){return(Viewstyle={styles.row}Imagesource={{uri:'}}style={styles.image}/Viewstyle={styles.text}Textstyle={styles.title}ReactNative/TextTextstyle={styles.subtitle}BuildhighqualitymobileappsusingReact/Text/View/View);},});varstyles=StyleSheet.create({row:{flexDirection:'row',margin:40},image:{width:40,height:40,marginRight:10},text:{flex:1,justifyContent:'center'},title:{fontSize:11,fontWeight:'bold'},subtitle:{fontSize:10},});PolyfillsReactNative的重点是改变视图代码编写的方式。接下来，我们注意网络中普遍的并把那些API放在适当的地方。可以使用npm安装JavaScript库，这些库用于融入到ReactNative中的顶级功能，比如XMLHttpReques第1章官网首页|9t，window.requestAnimationFrame及navigator.geolocation。我们正在扩大可用的API，并致力于为开源社区做出贡献。varReact=require('react-native');var{Text}=React;varGeoInfo=React.createClass({getInitialState:function(){return{position:'unknown'};},componentDidMount:function(){navigator.geolocation.getCurrentPosition((position)=this.setState({position}),(error)=console.error(error));},render:function(){return(TextPosition:{JSON.stringify(this.state.position)}/Text);},});可扩展性使用ReactNative无需编写一行原生代码即可创建出一款不错的应用程序，并且ReactNative可通过自定义原生视图和模块来进行扩展--也就是说你可以重用你已经构建的任何内容，并且可导入和使用你最喜欢的原生库。为了在iOS中创建一个简单的模块，需要创建一个新的类来实现RCTBridgeModule协议，并将你想要在RCT_EXPORT_METHOD中对JavaScript可用的功能包装起来。另外，类本身必须可以用RCT_EXPORT_MODULE()显式导出；//Objective-C#importRCTBridgeModule.h@interfaceMyCustomModule:NSObjectRCTBridgeModule@end@implementationMyCustomModuleRCT_EXPORT_MODULE();//AvailableasNativeModules.MyCustomModule.processStringRCT_EXPORT_METHOD(processString:(NSString*)inputcallback:(RCTResponseSenderBlock)callback){callback(@[[inputstringByReplacingOccurrencesOfString:@GoodbyewithString:@Hello];]]);}第1章官网首页|10@end//JavaScriptvarReact=require('react-native');var{NativeModules,Text}=React;varMessage=React.createClass({render:function(){getInitialState(){return{text:'GoodbyeWorld.'};},componentDidMount(){NativeModules.MyCustomModule.processString(this.state.text,(text)={this.setState({text});});},return(Text{this.state.text}/Text);},});自定义的iOS视图可以通过子类化RCTViewManager，实现-(UIView*)view方法并用RCT_EXPORT_VIEW_PROPERTY宏导出属性的办法来公开。然后一个简单的JavaScript文件会连接这些点。//Objective-C#importRCTViewManager.h@interfaceMyCustomViewManager:RCTViewManager@end@implementationMyCustomViewManager-(UIView*)view{return[[MyCustomViewalloc]init];}RCT_EXPORT_VIEW_PROPERTY(myCustomProperty);@end//JavaScriptmodule.exports=createReactIOSNativeComponentClass({validAttributes:{myCustomProperty:true},uiViewClassName:'MyCustomView',});ReactNative入门第1章官网首页|11快速入门入门要求1.OSX-当前仅支持OSX2.推荐使用Homebrew的方式来安装nvm，watchman和flow。3.安装Node.js4.0或者更新的版本。•使用Homebrew来安装nvm或者参考它的安装指南。接着运行nvminstallnode&&nvmaliasdefaultnode,它可以让您安装最新版本的Node.js并设置您的终端，所以你可以通过键入node来运行它。使用Nvm可以让您安装多个版本的Node.js并且在它们之间轻松切换。•npm的更新之处。4.brew安装watchman。我们推荐您安装watchman,否则您可能在点击一个节点文件的时候出现错误。5.brew安装flow。如果您想使用flow.我们建议定期运行brewupdate&&brewupgrade来使您的应用程序保持最新状态。安装iOS我们需要Xcode6.3或者更高的版本。您可以在App应用商店里面安装它。安装Android如果想要编写ReactNative安卓应用程序，您需要安装安卓SDK（如果您不想在真机上运行您的应用程序，那么您还需要一个安卓模拟器）。请参阅安卓安装指南说明来配置你的安卓环境。快速开始$npminstall-greact-native-cli$react-nativeinitAwesomeProject$cdAwesomeProject/运行iOS应用程序：第2章快速入门|13•在Xcode中打开ios/AwesomeProject.xcodeproj并且点击运行。•在选定的文本编辑器中打开index.ios.js并且编辑代码。•点击iOS模拟器中的?-R来重新加载应用程序并且观察发生的变化！运行Android应用程序：•$react-nativerun-android•在选定的文本编辑器中打开index.android.js并且编辑代码。•按下菜单按钮（默认情况下是F2，或在Genymotion中点击?M），然后选择*ReloadJS*看看发生了什么变化！•在一个终端中运行adblogcat