React Native用法简介和入门指南

2021年3月25日12:31:33 发表评论 918 次浏览

因此, 你希望能够构建适用于Android和iOS的移动应用程序。你应该学什么?每个应用程序的单独本地语言, 即Android的Java和iOS的Swift / Objective-C?

Android和iOS的原生开发有很大不同, 而且可能会很昂贵–首先, 语言本身也有很大不同, 其次, 所有基础API都不同–使用GPS的方式不同, 创建动画的方式也不同, 你拨打网络电话是不同的。

我们一直在寻找更短的开发周期, 更快的部署时间以及更好的应用性能。而且, 混合移动框架如此之多, 例如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应用程序所需的一切。

React Native简介2

这里需要注意的几件事:

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简介3

对于iOS用户:

React Native简介4

乍一看, React应用程序的源代码看起来像一个奇怪的XML或HTML文档, 由各种组件组成。在引擎盖的后面, 这些是JavaScript类, 它们扩展了React.Component并借助JSX语法将自身呈现在彼此内部。

但是, 我们将从头开始, 以更好地了解应用程序的工作原理。index.android.js和index.ios.js文件。

我们不得不在

index.android.js

index.ios.js

文件。但是幸运的是, 我们能够从其他包中导入源代码。因此, 我们创建一个新的src /目录, 并在其中创建一个lsbin.js文件:

React Native简介5

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

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简介6

你应该能够看到相同的

lsbin太棒了!

信息打印在你的设备上。无需编译整个项目。

至此, 我们已经完成了一个干净的React Native项目设置, 并准备开始向该应用中添加一些实际功能。请关注lsbin, 以获取下一个教程, 在这里我们将能够与React Native一起玩并构建一些很酷的应用程序, 例如Calculator app等。

React Native如何工作?

如果发现任何不正确的地方, 或者想分享有关上述主题的更多信息, 请写评论。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: