实战ReactNative 从入门到精通 重要技术解析，5分钟搭建iOS, Android App 实战一
说明
在本React Native教程中，您将学习如何基于非常流行的React JavaScript库构建本机应用程序。
是什么让React Native与其他框架（例如，使用JavaScript创建iOS应用程序的PhoneGap（Apache Cordova） 或Appcelerator Titanium）不同？
- （与PhoneGap不同）使用React Native，您的代码可能是用JavaScript编写的，但应用程序的UI是完全本机的。它没有混合HTML5应用通常具有的缺点。
- 另外（与Titanium不同），React引入了一种新颖，激进且功能强大的方法来构建用户界面。您的UI只是当前应用程序状态的函数。
React Native将 React 范例带入了移动应用程序开发。目标不是一次性编写代码并在任何平台上运行。目标是一次学习（React方式）并在任何地方编写。一个重要的区别。本教程仅涵盖iOS，但是一旦您在此处学习了概念，便可以将这些知识很快地移植到创建Android应用中。
如果您只用Swift编写过应用程序，则可能不会对使用JavaScript感到特别兴奋。但是，函数式编程方面应该引起您的兴趣！
Swift引入了更多的功能性方法来编码算法，以及鼓励转换和不变性的技术。但是，构造UI的方式与使用Objective-C进行开发时非常相似：它仍然是基于UIKit的，并且势在必行。
该社区甚至添加了Expo和Create React Native App等工具，可帮助您快速构建React Native应用程序，而无需接触Xcode或Android Studio！
历史
先说个历史事件，2012年扎克伯格比较后悔花了好几个月事件开发html5, 最后全部用Native重写。那个时候机器的性能太差。但是现在手机的配置都比10年的电脑配置都好。而且有个歧义，ReactNative不是Hybrid开发，最终会翻译为Native原生代码，接下来会有介绍。
In 2012 Mark Zuckerberg commented, “The biggest mistake we made as a company was betting too much on HTML as opposed to native”.[8] He promised that Facebook would soon deliver a better mobile experience.
Facebook released the first version for the React JavaScript Configuration in 2015.
– 维基百科
Zuckerberg 12年的YouTube：
https://www.youtube.com/watch?v=GBp_xCGIATk
15年F8会议 Facebook 就推出了 VR
https://www.youtube.com/watch?v=HXT3MAXYUCg
19年F8会议Facebook privacy
https://www.youtube.com/watch?v=8XLFm2NBr34
入门
React Native使用JavaScript运行时Node.js来构建JavaScript代码。如果您还没有安装Node.js，那么是时候获取它了！
首先按照Homebrew网站上的说明安装Homebrew 。然后通过在“终端”窗口中执行以下操作来安装Node.js：
brew install node
接下来，用于homebrew安装watchman
，这是来自Facebook的文件监视程序：
brew install watchman
React Native使用它来确定代码何时更改并相应地重建。这就像让Xcode在每次保存文件时进行构建一样。
接下来使用npm安装React Native命令行界面（CLI）工具：
npm install -g react-native-cli
更新React Native到最新版本
npm install -g react-native@latest
笔者版本为
$ react-native --version
4.8.0
这使用Node Package Manager来获取CLI工具并在全局进行安装。npm在功能上类似于CocoaPods或Carthage，并与Node.js打包在一起。
导航到您要开发应用程序的文件夹，然后在终端中运行以下命令：
react-native init HelloReactNative
% react-native init HelloReactNative###### ###### ### #### #### ### ## ### ### ## ## #### ## ## #### ## ## ## ## ## ## ### ### ## ## ######################## ## ###### ### ### ###### ### ## ## ## ## ### ### ## ### #### ### ## ### ## #### ######## #### ## ## ### ########## ### ## ## #### ######## #### ## ### ## ### #### ### ## ### ### ## ## ## ## ### ###### ### ### ###### ## ######################## ## ## ### ### ## ## ## ## ## ## #### ## ## #### ## ## ### ### ## ### #### #### ### ###### ###### Welcome to React Native! Learn once, write anywhere ✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing CocoaPods dependencies (this may take a few minutes)Run instructions for iOS:• cd "/Users/zgpeace/Workspace/ReactNative/HelloReactNative" && npx react-native run-ios- or -• Open HelloReactNative/ios/HelloReactNative.xcworkspace in Xcode or run "xed -b ios"• Hit the Run buttonRun instructions for Android:• Have an Android emulator running (quickest way to get started), or a device connected.• cd "/Users/zgpeace/Workspace/ReactNative/HelloReactNative" && npx react-native run-android
这将使用CLI工具创建一个启动项目，其中包含构建和运行React Native应用所需的一切。
如果您对节点的版本有所抱怨，请确保brew安装的节点是正在使用的节点。brew link --overwrite node在终端中运行。
在终端中，运行：
cd HelloReactNative
在创建的文件夹和文件中，您会发现一些注意事项：
node_modules是一个包含React Native框架的文件夹index.js是CLI工具创建的入口点App.js是CLI工具创建的骨架应用程序ios是一个文件夹，其中包含Xcode项目和引导应用程序所需的代码android是一个包含Android相关代码的文件夹
运行iOS App
- 运行命令
npx react-native run-ios
或者，
2) 启动一个后台运行的server
npm start
# you can also use: expo start
用XCode 11.3 运行ios/HelloReactNative.xcworkspace
那是一个在模拟器中运行的JavaScript应用程序，呈现了本机UI，而看不到浏览器！
还是不相信我？：]亲自验证：在Xcode中，选择Debug \ View Debugging \ Capture视图层次结构，然后查看本机视图层次结构。您将UIWebView在任何地方都看不到任何实例！您的文字将显示在名为的视图中RCTText。那是什么 返回Xcode中，选择File \ Open Quickly…，然后输入RCTView.h。注意RCTView直接从继承UIView。整齐！
好奇如何运作？在Xcode中，打开AppDelegate.m并定位application:didFinishLaunchingWithOptions:。此方法构造一个RCTRootView，从索引 JavaScript文件加载JavaScript应用程序并呈现结果视图。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{#if DEBUGInitializeFlipper(application);
#endifRCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridgemoduleName:@"HelloReactNative"initialProperties:nil];rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];UIViewController *rootViewController = [UIViewController new];rootViewController.view = rootView;self.window.rootViewController = rootViewController;[self.window makeKeyAndVisible];return YES;
}
运行此应用程序时打开的“终端”窗口启动了打包程序和服务器，该程序允许在默认情况下在端口8081上获取JavaScript代码。例如：
http://localhost:8081/index.bundle?platform=ios
在Safari中打开此URL；您会看到应用程序的JavaScript代码。您可以找到 在React Native框架之间，App.js嵌入的描述代码。
比如在App.js 中加入文字
<Text>HelloReactNative zgpeace</Text>
就可搜索到文字HelloReactNative zgpeace
当您的应用启动时，此代码由JavaScriptCore框架加载并执行。对于您的应用程序，它将加载App组件，然后构造本机UIKit视图。
可以看到连带启动了一个终端
这是Metro Bundler
，它是在Node.js下运行的React Native JavaScript捆绑器。您很快就会发现它的作用。
注意：如果在启动打包程序时遇到错误，请在终端运行：
react-native start
不要关闭终端窗口；只需使其在后台运行即可。如果您确实错误关闭了它，只需停止并通过Xcode重新运行该项目。
查看运行的版本
查看文件package.json, 知道笔者的版本为"react-native": "0.62.2"
{"name": "HelloReactNative","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ."},"dependencies": {"react": "16.11.0","react-native": "0.62.2"},"devDependencies": {"@babel/core": "^7.6.2","@babel/runtime": "^7.6.2","@react-native-community/eslint-config": "^0.0.5","babel-jest": "^24.9.0","eslint": "^6.5.1","jest": "^24.9.0","metro-react-native-babel-preset": "^0.58.0","react-test-renderer": "16.11.0"},"jest": {"preset": "react-native"}
}运行Android App
启动一个后台运行的server
npm start
# you can also use: expo start
如果本地已经装好Android Studio，下载好模拟器
npx react-native run-android
扩展阅读ECMAScript 6（ES6）
使用ECMAScript 6（ES6）导入语法加载react模块并将其分配给名为的变量React。这大致相当于在Swift中链接和导入库。它还使用所谓的解构分配来引入Component对象。通过解构，您可以提取多个对象属性，并使用单个语句将它们分配给变量。
注意：有关ES6模块的更多信息，我建议阅读Dr. Axel Rauschmayer的这篇博客文章
。
ES6是编写JavaScript的一种更好的方法，它支持默认参数，类，箭头函数和销毁结构等功能。自iOS 10以来，Apple已支持ES6，但较旧的浏览器可能与此不兼容。React Native使用一个称为Babel
的工具在必要时自动将现代JavaScript转换为兼容的旧版JavaScript。
代码下载
https://github.com/zgpeace/HelloReactNative
参考
https://www.raywenderlich.com/485-react-native-tutorial-building-ios-apps-with-javascript
https://reactjs.org/
https://reactjs.org/tutorial/tutorial.html
https://en.wikipedia.org/wiki/React_Native
https://www.raywenderlich.com/178012/react-native-tutorial-building-android-apps-javascript
实战ReactNative 从入门到精通 重要技术解析，5分钟搭建iOS, Android App 实战一相关推荐
- linux c 并行编程从入门到精通,VISUAL STUDIO 2010并行编程从入门到精通(微软技术丛书)...
摘要: <微软技术丛书:Visual Studio2010并行编程从入门到精通>循序渐进,步骤式动手练习迅速帮助读者掌握并行编程的基础知识. <微软技术丛书:Visual Studi ...
- 爬虫的步骤解析内容xpath介绍_爬虫入门到精通-网页的解析（xpath）
在爬虫入门到精通第五讲中,我们了解了如何用正则表达式去抓取我们想要的内容.这一章我们来学习如何更加简单的来获取我们想要的内容. xpath的解释 XPath即为XML路径语言(XML Path Lan ...
- 阿里巴巴最新 SpringCloudAlibaba 实战教程，入门到精通面面俱到
Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,依托 Spring Cloud Alibaba,只需要添加一些注解和少量配置, ...
- 黑客攻防实战，黑客入门到精通，收藏这一篇就够了
前言 你知道在每天上网时,有多少黑客正在浏览我们计算机中的重要数据吗﹖黑客工具的肆意传播,使得即使是稍有点计算机基础的人,就可以使用简单的工具对网络中一些疏于防范的主机进行攻击,在入侵成功之后,对其中 ...
- 最新云知梦Jquery项目实战 jq重入门到精通(完整 )
云知梦的教程讲的还是可以的! 但是他们的教程 每一集都差不多有将近一个小时可能有些人不是很习惯! <云知梦Jquery前端框架> ├Jquery表单验证实现过程.avi ├第1集 J ...
- 网络安全|渗透测试入门学习，从零基础入门到精通—动态分析技术工具OllyDbg界面介绍
目录 动态分析技术调试器 什么是OllyDbg OllyDbg能干什么 OllyDbg窗口介绍 1.反汇编面板窗口 2.信息面板窗口 3.数据面板窗口 4.寄存器面板窗口 5.栈面板窗口 动态分析技术 ...
- AI实战：从入门到精通系列——用感知器实现情感分类（一）
前言 人工智能的第一次高潮始于上世纪50年代.在算法方面,感知器数学模型被提出用于模拟人的神经元反应过程,并能够使用梯度下降法从训练样本中自动学习,完成分类任务. 感知器 感知器算法在上个世纪50-7 ...
- PyTorch实战福利从入门到精通之五——搭建ResNet
Kaiming He的深度残差网络(ResNet)在深度学习的发展中起到了很重要的作用,ResNet不仅一举拿下了当年CV下多个比赛项目的冠军,更重要的是这一结构解决了训练极深网络时的梯度消失问题. ...
- PyTorch实战福利从入门到精通之六——线性回归
一元线性回归 一元线性模型非常简单,假设我们有变量 xix_ixi 和目标 yiy_iyi,每个 i 对应于一个数据点,希望建立一个模型 y^i=wxi+b\hat{y}_i = w x_i + ...
- PyTorch实战福利从入门到精通之四——卷积神经网络CIFAR-10图像分类
在本教程中,我们将使用CIFAR10数据集.它有类别:"飞机"."汽车"."鸟"."猫"."鹿".& ...
最新文章
- singleton设计模式_让我们研究一下Singleton设计模式的优缺点
- 飞凌 修改ip地址 linux,linux上搭建DHCP服务
- win10 1709电脑无法显示局域网共享
- github如何删除一个repository【找不到settings】
- 为什么补码会比原码多一个数
- SAP Fiori Elements Service Order edit - why no http request sent
- n个结点，不同形态的二叉树（数目+生成）
- Spring boot配置log4j
- 不再惧怕！二叉树结构相关算法总结 | 原力计划
- Yii Framework的process flow分析
- opencv基本绘图函数--点，线，矩形，圆等
- 四级信息安全工程师基础知识
- vue 检测ie版本_vue判断当前浏览器为IE低版本，给出升级提示；IE11及其他浏览器正常使用-Go语言中文社区...
- 董明珠赞同取消住房公积金 格力员工每人一套房
- 外贸常用术语_外贸业务中常用的术语
- 为什么Sql Server的查询有时候第一次执行很慢，第二次，第三次执行就变快了
- 3315 时空跳跃者的魔法
- Redis的ZSET的实现及结合源码的跳跃表结构分析
- 粗浅地浏览一下，待明日来嘞，认真去刷！
- log4net进阶手札(三)：保存日志到oracle中