React Native用法简介和入门指南

因此, 你希望能够构建适用于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用法简介和入门指南

文章图片
这将创建一个项目, 其中包含构建和运行React Native应用程序所需的一切。
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用户:
React Native用法简介和入门指南

文章图片
对于iOS用户:
React Native用法简介和入门指南

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

index.ios.js
文件。但是幸运的是, 我们能够从其他包中导入源代码。因此, 我们创建一个新的src /目录, 并在其中创建一个lsbin.js文件:
React Native用法简介和入门指南

文章图片
好了, 现在我们开始导入一些我们需要开始的软件包。
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';

现在使用内置的特殊开发人员工具。摇动设备, 你会看到"重新加载"选项。单击重新加载并查看魔术。
React Native用法简介和入门指南

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

    推荐阅读