React Native 快速入门

Flying
2018-02-06 / 0 评论 / 107 阅读 / 正在检测是否收录...

创建 React 本机应用程序是开始构建新的 React Native 应用程序的最简单方法。它允许你启动一个项目,而不需要安装或配置任何工具来构建本地代码-不需要安装 Xcode 或 Android Studio(请参阅注意事项)。

start-rn.svg

假设您安装了 Node.js,您可以使用 npm 来全局安装 create-react-native-app

npm install -g create-react-native-app

然后运行以下命令来新建一个名为 AwesomeProject 的 React Native 项目:

create-react-native-app AwesomeProject
cd AwesomeProject
npm start

这将为您启动一个开发服务器。

运行您的 React Native 应用程序

在您的 iOS 或 Android 手机上安装 Expo(国内需要翻墙)客户端应用程序,并连接到与您的计算机相同的 WIFI 网络。在 Android 上,使用 Expo 应用程序扫描终端上的 QR 码以打开您的项目。在 iOS 上,按照屏幕上的说明获取链接。

QR 码

接下来开始编译和下载 JavaScript Bundle。Expo 应用程序会显示编译和下载进度。

编译进度

修改你的应用程序

现在您已经成功运行该应用程序,我们来修改它。

App.js 在您选择的文本编辑器中打开并编辑一些行。保存更改后,应用程序应该自动重新加载。也可以通过摇一摇手机选择Disabled/Enable Live Reload菜单项手动来控制。

开发菜单

这这么简单!

恭喜!您已成功运行并修改了您的第一个 React Native 应用。

使用(Chrome/Edge)在线运行

注意事项:

如果您的 Expo 应用程序提示 Something went wrong,请点击该页下方的 View error log 链接查看详情。常见的错误是开发服务器没启动或者没有连接到与计算机相同的 WIFI 网络。

由于使用 Create React Native App 创建项目时不会生成任何本机代码,因此除了可以在 Expo 客户端应用程序中使用的 React Native API 和组件之外,还无法包含自定义本机模块。

如果您知道最终需要包含自己的本机代码,那么创建 React 本机应用程序仍然是开始的好方法。在这种情况下,你只需要 Emit 最终创建自己的本地构建。

创建 React Native App 将您的项目配置为使用 Expo 客户端应用程序支持的最新 React Native 版本。在 React Native 版本稳定发布后的一周,Expo 客户端应用程序通常会获得对给定 React Native 版本的支持。您可以查看本文档以了解哪些版本受支持。

6

评论 (0)

取消