作为网络开发人员，您可能认为移动应用程序开发需要使用另一种编程语言创建新的学习曲线。也许java和swift需要添加到你的技能组中，以便在ios和android上运行，这可能会让你失望。
但是这篇文章让你感到惊喜！我们将考虑使用woocommerce平台作为后端，为ios和android构建电子商务应用程序。对于任何愿意进入原生跨平台开发的人来说，这都是一个理想的起点。
跨平台发展简史这是2011年，我们看到混合移动应用程序开发的开始。apache cordova，phonegap和ionic framework等框架慢慢出现。一切看起来都不错，而且网络开发人员正在利用他们现有的知识热切地编写移动应用程序。
但是，移动应用程序仍然看起来像移动版本的网站。没有像android的材质设计或ios平板外观的原生设计。导航工作类似于网页，转换并不平坦。用户对使用混合方法构建的应用程序并且梦想本地体验不满意。
快进到2015年3月，react native出现在现场。开发人员能够使用react构建真正的本地跨平台应用程序，这是许多开发人员喜爱的javascript库。他们现在可以轻松地学习一个小型图书馆，而不仅仅是他们对javascript的了解。有了这些知识，开发人员现在就瞄准了网络，ios和android。
此外，开发过程中对代码所做的更改几乎可以立即加载到测试设备上！当我们通过其他方法进行本地开发时，这往往需要几分钟的时间。开发人员可以享受他们过去喜欢网络开发的即时反馈。
react开发人员非常乐意将他们已经使用的现有模式完全应用于新平台。事实上，他们将目标锁定在两个他们已经熟知的平台上。
这对前端开发很有好处。但是我们对后端技术有什么选择？我们还需要学习新的语言或框架吗？
wordpress rest api在2016年年底，wordpress发布了期待已久的rest api到其核心，并为具有解耦后端的解决方案打开了大门。
因此，如果您已经拥有wordpress和woocommerce网站，并希望在您的网站和原生应用中保留完全相同的产品和用户配置文件，本文即为您提供！
假设在本文中做出我会引导您使用您的wordpress技能，通过使用react native构建带有woocommerce商店的移动应用程序。文章假设：
您熟悉不同的wordpress?api，至少在初学者级别。你熟悉react的基础知识。你准备好了一个wordpress开发服务器。我在apache上使用ubuntu。您可以使用android或ios设备与世博会进行测试。我们将在本教程中构建的内容我们将通过这篇文章构建的项目是一个时尚商店应用程序。该应用程序将具有以下功能：
商店页面列出所有产品，单个产品页面包含所选项目的详细信息，‘添加到购物车’功能，‘显示购物车中的项目’功能，‘从购物车删除商品’功能。本文旨在激励您使用此项目作为使用react native构建复杂移动应用程序的起点。
注意：对于完整的应用程序，您可以在github上访问我的项目并克隆它。
开始我们的项目我们将根据官方的react native文档开始构建应用程序。在您的开发环境中安装了node后，打开命令提示符并键入以下命令以全局安装create react native app。
npm install -g create-react-native-app复制
接下来，我们可以创建我们的项目
create-react-native-app react-native-woocommerce-store复制
这将创建一个新的react native项目，我们可以使用expo进行测试。
接下来，我们需要在我们想要测试的移动设备上安装expo应用程序。它适用于ios和android。
在安装了世博应用程序后，我们可以在我们的开发机器上运行npm start。
cd react-native-woocommerce-store
npm start复制
通过世博会的命令行启动一个react native项目。（大预览）之后，您可以通过expo app扫描qr代码，或者在应用程序的搜索栏中输入给定的url。这将在手机中运行基本的’hello world’应用程序。我们现在可以编辑app.js，以便对手机上运行的应用程序进行即时更改。
或者，您可以在模拟器上运行该应用程序。但为了简洁和准确，我们将涵盖在实际设备上运行它。
接下来，我们使用以下命令安装应用程序的所有必需软件包：
npm install -s axios react-native-htmlview react-navigation react-redux redux redux-thunk复制
设置一个wordpress站点由于本文是关于创建react native应用程序的，因此我们不会详细讨论创建wordpress网站的细节。请参考这篇关于如何在ubuntu上安装wordpress的文章。由于woocommerce rest api需要https，请确保使用let’s encrypt进行设置。请参阅本文以获取操作指南。
我们不在本地主机上创建wordpress安装，因为我们将在移动设备上运行应用程序，并且还需要https。
一旦wordpress和https成功建立，我们就可以在网站上安装woocommerce插件。
将woocommerce插件安装到我们的wordpress安装中。（大预览）安装并激活插件后，按照向导继续进行woocommerce商店安装。向导完成后，点击“返回仪表板”。
你会被另一个提示迎接。
向woocommerce添加示例产品。（大预览）点击’let’s go’到’add example products’。这将节省我们创建自己的产品以显示在应用程序中的时间。
常量文件要从woocommerce rest api加载我们商店的产品，我们需要在我们的应用程序中安装相关密钥。为此，我们可以有一个constans.js文件。
首先创建一个名为’src’的文件夹并在其中创建子文件夹，如下所示：
在constans文件夹中创建文件’constants.js’。（大预览）现在，让我们为woocommerce生成密钥。在wordpress仪表板中，导航到woocommerce→设置→api→键/应用程序，然后点击“添加键”。
接下来创建名称为react native的只读密钥。将消费者密钥和消费者密钥复制到constants.js文件中，如下所示：
const constants = {
url: {
wc: 'https://woocommerce-store.on-its-way.com/wp-json/wc/v2/'
},
keys: {
consumerkey: 'consumer_key_here',
consumersecret: 'consumer_secret_here'
}
}
export default constants;
复制
从反应导航开始react navigation是一个在不同屏幕之间导航的社区解决方案，并且是一个独立的库。它允许开发人员使用几行代码设置react native应用程序的屏幕。
我们开发您的响应式布局
尖端的数据探索
react navigation中有不同的导航方法：
堆栈，开关，标签，抽屉，和更多。对于我们的应用程序，我们将结合使用stacknavigation和drawernavigation在不同屏幕之间导航。stacknavigation与浏览器历史记录在网络上的工作方式类似。我们正在使用它，因为它为标题和标题导航图标提供了一个界面。它具有与数据结构中的堆栈类似的推送和弹出功能。推意味着我们添加一个新的屏幕到导航堆栈的顶部。pop从堆栈中删除一个屏幕。
该守则显示，stacknavigation事实上，drawernavigation它本身就是其中的一部分。它还会获取标题样式和标题按钮的属性。我们将导航抽屉按钮放在左边，购物车按钮放在右边。抽屉按钮打开和关闭抽屉，而购物车按钮则将用户带到购物车屏幕。
const stacknavigation = stacknavigator({
drawernavigation: { screen: drawernavigation }
}, {
headermode: 'float',
navigationoptions: ({ navigation, screenprops }) => ({
headerstyle: { backgroundcolor: '#4c3e54' },
headertintcolor: 'white',
headerleft: drawerbutton(navigation),
headerright: cartbutton(navigation, screenprops)