实战ReactNative 从入门到精通重要技术解析，5分钟搭建iOS, Android App 实战一

说明在本React Native教程中，您将学习如何基于非常流行的React JavaScript库构建本机应用程序。是什么让React Native与其他框架（例如，使用JavaScript创建iOS应用程序的PhoneGap（Apache Cordova）或Appcelerator Titanium）不同？（与PhoneGap不同）使用React Native，您的代码可能是用Jav...

AI架构师易筋

1135人浏览 · 2020-05-04 09:55:49

AI架构师易筋 · 2020-05-04 09:55:49 发布

说明

在本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 button

  Run 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 DEBUG
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"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。