React Native用法简介和入门指南 _iOS开发

因此, 你希望能够构建适用于Android和iOS的移动应用程序。你应该学什么？每个应用程序的单独本地语言, 即Android的Java和iOS的Swift / Objective-C？
Android和iOS的原生开发有很大不同, 而且可能会很昂贵–首先, 语言本身也有很大不同, 其次, 所有基础API都不同–使用GPS的方式不同, 创建动画的方式也不同, 你拨打网络电话是不同的。
【React Native用法简介和入门指南】我们一直在寻找更短的开发周期, 更快的部署时间以及更好的应用性能。而且, 混合移动框架如此之多, 例如NativeScript, React Native, Ionic, Xamarin, PhoneGap等。我将重点关注React Native。所以,
什么是React Native？
React Native
是由Facebook开发的框架, 用于使用一种通用语言JavaScript为iOS和Android创建本机样式的应用程序。最初, Facebook仅开发React Native来支持iOS。但是, 有了最近对Android操作系统的支持, 该库现在可以为两个平台呈现移动UI。
为什么要React Native？
每当使用Swift / Objective-C或Java编写的应用程序有更新时, 都需要重新编译整个应用程序, 并且必须将新版本再次分发到App Store。根据App Store的审查程序, 所有这一切可能需要几个星期。
为了避免这种麻烦, React本机应用程序以不同的方式工作, 本机应用程序能够找到特定的JavaScript代码, 然后在实际设备上启动该应用程序时下载并编译该JavaScript代码。这样, 可以立即完成应用程序更新, 而无需一次又一次地向App Store提交新版本。
如何构建一个React Native App？
使用React Native进行构建非常高效且令人上瘾, 但是入门可能会有些棘手。React Native用途Node.js, 一个JavaScript运行时, 以构建你的JavaScript代码。如果你还没有安装Node.js, 那么现在该获取它了！
我们要做的第一件事是安装
React Native
上面链接的指南为Mac, Windows和Linux用户提供了说明, 以及为Android和iOS环境做准备的说明。
对于Mac用户, 最好执行以下三个命令：对于Windows或Linux用户, 请遵循上面链接的指南。
首次安装家酿使用Homebrew网站上的说明, 然后在安装Homebrew之后在终端中运行以下命令：

brew install node

接下来, 安装守望者, 来自Facebook的文件查看器：

brew install watchman

React Native使用它来确定代码何时更改并相应地重建。这就像每次保存文件时都要进行Xcode构建一样。
接下来使用npm安装React Native命令行界面(CLI)工具：

npm install -g react-native-cli

这使用节点包管理器来获取CLI工具并在全局进行安装。
完成React Native安装后, 我们可以继续创建我们的项目：

react-native init lsbin

文章图片
这将创建一个项目, 其中包含构建和运行React Native应用程序所需的一切。

文章图片
这里需要注意的几件事：
1)React Native使用npm进行软件包管理, 因此使用node_modules目录。
2)android和ios目录包含典型的Android / iOS项目, 可以分别在Android Studio / Xcode中打开和运行它们。
3)index.android.js和index.ios.js文件包含我们针对Android和iOS的React Native源代码的主要入口点。
继续并使用以下命令在首选设备/模拟器上运行该应用程序：
对于iOS：

react-native run-ios

对于Android：

react-native run-android

你会注意到一个新的终端窗口打开, 该窗口正在运行React Native打包程序。你可以只让该终端在后台运行, 并且在你编写React Native代码时它将处理应用程序的打包和实时重载。
现在, 假设一切都已正确设置(如果不是堆栈溢出错误), 你应该会看到类似以下内容：
对于Android用户：

文章图片
对于iOS用户：

文章图片
乍一看, React应用程序的源代码看起来像一个奇怪的XML或HTML文档, 由各种组件组成。在引擎盖的后面, 这些是JavaScript类, 它们扩展了React.Component并借助JSX语法将自身呈现在彼此内部。
但是, 我们将从头开始, 以更好地了解应用程序的工作原理。index.android.js和index.ios.js文件。
我们不得不在
index.android.js
和
index.ios.js
文件。但是幸运的是, 我们能够从其他包中导入源代码。因此, 我们创建一个新的src /目录, 并在其中创建一个lsbin.js文件：

文章图片
好了, 现在我们开始导入一些我们需要开始的软件包。

import React, { Component } from 'react' ; import { Text, AppRegistry } from 'react-native' ;

在这里, 我们要做的就是从react包中导入React和Component, 并从react-native包中导入Text和AppRegistry。
现在, 我们可以继续定义我们的极客零件。组件本质上是一个视图, 可以包含子视图和子组件。

class lsbin extends Component {render() { return ( < Text> lsbin is Awesome!< /Text> ) }}

极客Component类的子类, 并覆盖render函数以渲染其UI。目前, 我们正在渲染一个简单的lsbin太棒了！文本标签, 但是此渲染功能将迅速增长并变得更加复杂。
最后, 在再次运行该应用程序之前, 我们需要向lsbin注册AppRegistry我们上面导入的内容, 因为你通常只需要注册你的根组件。

AppRegistry.registerComponent('lsbin', () => lsbin);

现在在index.android.js和index.ios.js文件中, 我们只需要导入lsbin源代码：

import lsbin from './src/lsbin';

现在使用内置的特殊开发人员工具。摇动设备, 你会看到"重新加载"选项。单击重新加载并查看魔术。

文章图片
你应该能够看到相同的
lsbin太棒了！
信息打印在你的设备上。无需编译整个项目。
至此, 我们已经完成了一个干净的React Native项目设置, 并准备开始向该应用中添加一些实际功能。请关注lsbin, 以获取下一个教程, 在这里我们将能够与React Native一起玩并构建一些很酷的应用程序, 例如Calculator app等。
React Native如何工作？
如果发现任何不正确的地方, 或者想分享有关上述主题的更多信息, 请写评论。