如何使用ReactNativePart＃2构建WordPress应用程序：您的环境

如果想从头开始学习&＃xff0c;可以在下面找到本教程系列的所有先前部分&＃xff1a;

使用React Native&＃xff03;1构建WordPress客户端应用程序&＃xff1a;概述

首先&＃xff0c;我们将创建一个新的React Native项目。 为此&＃xff0c;我们将使用react-native CLI。 现在&＃xff0c;为了创建一个新项目&＃xff0c;我们需要在所需的项目目录中运行以下命令&＃xff1a;

现在&＃xff0c;我们将在Visual Studio Code中打开我们的项目目录&＃xff0c;如下面的屏幕快照所示&＃xff1a;

在VScode中打开项目后&＃xff0c;我们需要在Android和iOS仿真器中运行代码。

为了在iOS模拟器上运行项目&＃xff0c;我们需要在项目目录命令提示符下运行以下命令&＃xff1a;

react-native run-ios

因此&＃xff0c;我们将在仿真器屏幕中获得以下结果&＃xff1a;

Android的重要声明

1. 强烈建议使用jdk-1.8。 使用其他版本的JDK可能会在android中部署项目期间发出错误。
2. 然后&＃xff0c;我们需要创建一个使用Android 10和Google Play服务的新模拟器。

现在&＃xff0c;我们可以在Android模拟器上运行该项目。 为此&＃xff0c;我们需要在项目目录命令提示符下运行以下命令&＃xff1a;

react-native start

然后&＃xff0c;我们需要运行&＃xff1a;

因此&＃xff0c;我们将在仿真器屏幕中获得以下结果&＃xff1a;

在真实设备上运行

对于iOS平台

如果要在iOS设备上运行项目&＃xff0c;则需要打开Xcode并为我们的应用设置团队目标&＃xff0c;如以下屏幕截图所示&＃xff1a;

并且&＃xff0c;我们需要对其进行测试&＃xff0c;如下图所示&＃xff1a;

现在&＃xff0c;我们准备实现我们的React本机应用程序。

对于Android

在这里&＃xff0c;我们将学习如何在实际的物理设备中运行react native应用。 启用

通过USB调试

为了在我们的设备上启用USB调试&＃xff0c;我们首先需要启用“开发人员选项”菜单&＃xff0c;方法是依次转到“设置” →“ 关于手机” &＃xff0c;然后点击底部的“内部版本号”行七次。 然后&＃xff0c;我们可以返回设置 → 开发人员选项以启用“ USB调试”。

通过USB插入我们的设备

我们需要通过USB将设备插入开发机器。

现在&＃xff0c;我们需要通过在命令行中运行以下命令来检查设备是否已正确连接到ADB&＃xff08;Android调试桥&＃xff09;&＃xff1a;

• 对于Mac &＃xff1a;adb设备
• 对于Linux &＃xff1a;lsusb
• 对于Windows &＃xff1a;adb设备

如果我们在右栏中看到该设备&＃xff0c;则表明该设备已连接。 一次只能连接一台设备。

完整的源代码

绝对很难同时为Android和iOS开发该应用程序。 首先&＃xff0c;我们尝试进行iOS开发并成功完成。 并且&＃xff0c;为确保Android开发没有错误和副作用&＃xff0c;我们还成功配置了所有软件包&＃xff0c;为Android平台开发了该应用。 为了方便起见&＃xff0c;下面提供了两个开发的最终源代码&＃xff1a;

• iOS的最终来源
• Android的最终来源

警告

• 最终源代码中未提供firebase凭证。
• 请更改用于获取数据的API。
• 强烈建议从空白的启动程序react native项目开始。

摘要

在本章中&＃xff0c;我们学习了如何开始在android和iOS平台上创建和运行react native项目。 在这里&＃xff0c;我们学习了使用React Native CLI创建react native项目。 然后&＃xff0c;我们学习了配置设备&＃xff0c;以便在Android和iOS模拟器中运行react native项目。 最后&＃xff0c;我们学习了如何在实际的物理Android和iOS设备上运行react-native项目。

本系列旨在展示我如何使用react-native构建一个应用程序以服务WordPress博客中的内容。 由于我的博客谈论的是本机反应&＃xff0c;因此该系列和文章相互联系。 我们将学习如何设置许多使我们的生活舒适的程序包&＃xff0c;并学习如何处理WordPress API。 在此&＃xff0c;本书中讨论的最突出的功能是深色主题&＃xff0c;脱机模式&＃xff0c;无限滚动等。 您可以在本系列中找到更多。 本教程系列的灵感来自instamobile的React Native App模板

From: https://hackernoon.com/build-a-wordpress-app-with-react-native-2-your-environment-9b12g32ty