使用React Native是当今开发跨平台移动应用程序最快的方法之一。 您使用它创建的应用程序在Android和iOS上都看起来不错，并且通常提供接近本机的性能。 但是，使用它创建成功的电子商务应用程序仍需要大量的技巧和精力，尤其是如果您是从头开始的话。
MStore Pro即开即用，支持WooCommerce集成，AdMob和Facebook广告，推送通知以及多个付款网关。 此外，它还包含大量的模块化组件和30多种精美的布局。
在本教程中，我将向您展示如何安装MStore Pro并充分利用其主要功能。
先决条件
要继续进行，您需要：
- 最新版本的Node.js
- 最新版本的Android Studio
- 运行Android 5.0或更高版本的设备或模拟器
- 安装了WooCommerce插件的WordPress实例
- Envato帐户
1.下载模板
由Envato精英作家InspireUI开发的MStore Pro是目前在CodeCanyon上可用的最受欢迎的React Native模板之一 。
要下载它，请登录到您的Envato帐户并为其购买常规许可证。 完成此操作后，您将可以访问名为codecanyon-17010642-beostore-complete-react-native-template-for-ecommerce.zip的ZIP文件。
将文件下载到您的计算机，然后使用存档管理器将其解压缩到一个临时目录。 如果您更喜欢使用终端，则可以运行以下命令：
cd /tmp
unzip ~/Downloads/codecanyon-17010642-beostore-\
complete-react-native-template-for-ecommerce.zipMStore Pro可以与Expo和React Native CLI一起使用。 现在，我们将其与后者一起使用。 因此，我们只需要mstore-3.8.0 / mstore-pro目录。 将其复制到您的开发环境并输入。
cp -r mstore-3.8.0/mstore-pro ~/dev
cd ~/dev/mstore-pro像大多数React Native模板一样，此模板中也包含Android项目和Xcode项目。 在本教程中，我们将仅处理Android项目。
Android项目需要知道您的Android SDK的位置。 因此，请打开android / local.properties文件并更新sdk.dir属性的值。
sdk.dir=/home/me/Android/Sdk2.安装依赖项
当然，您将需要React Native CLI来构建上一步中准备的项目。 如果还没有，请使用npm进行安装：
npm install -g react-native-cli 要管理MStore Pro的依赖关系，您将需要yarn 。 再次使用npm进行安装。
npm install -g yarn 现在，您可以使用yarn下载并安装所有依赖项。
yarn install上面的命令可能需要一段时间，具体取决于您的Internet连接速度。 完成后，请务必记住通过运行以下命令来链接所有本机依赖项：
react-native link此时，即可使用MStore Pro。
3.构建并运行
要将MStore Pro安装在您的Android设备上，只需执行以下命令：
react-native run-android如果您的Android开发环境没有配置问题，则在成功构建之后，您应该能够在设备上看到MStore Pro的初始屏幕和简介屏幕。
4.配置WordPress
MStore Pro适用于WordPress和WooCommerce。 为了使其能够与您的WordPress实例进行通信，您必须安装一些WordPress插件。 所有必需的插件都是免费和开源的，并且可以在由InspireUI维护的MStore GitHub存储库中找到。
访问存储库，选择Clone或download ，然后按Download ZIP按钮将整个存储库下载为ZIP文件。 或者，您可以从WordPress服务器运行以下命令：
wget 'https://github.com/inspireui/mstore/archive/master.zip'解压缩ZIP文件，并将plugins目录的所有内容复制到WordPress实例的wp-content / plugins目录。
现在，您必须激活所有新安装的插件。 为此，请登录WordPress管理仪表板，然后导航至Plugins> Installed Plugins 。 然后单击以下插件下方显示的“ 激活”链接：
- JSON API-InspireUI
- JSON API身份验证
- MStore CheckOut插件和API
- 重新产生缩图
- 更好的REST API特色图片
此外，导航到“设置”>“ JSON API” ，然后单击“ MStoreUser”控制器下方显示的“ 激活”链接。
除了商店的产品外，该模板还可以显示博客文章，只要它们具有漂亮的永久链接即可。 因此，如果您使用的是普通的永久链接，请确保进入“设置”>“永久链接”，然后选择“ 帖子名称”选项。
MStore Pro支持用户注册。 如果要使用此功能，请转到“设置”>“常规”，然后启用“ 任何人都可以注册”选项。
最后，您必须为WooCommerce的REST API生成一个API密钥。 为此，请转到WooCommerce>设置> REST API ，然后按创建API密钥按钮。 在弹出的表单中，向密钥添加一个简单的描述，然后按Generate API key按钮。
密钥生成后，您将可以访问两个字符串：使用者密钥和使用者密钥。
5.配置应用
模板的几乎所有重要配置文件都位于src / common /目录中。 在本教程的其余部分中，我们将修改此目录中的文件。
cd src/common 要将MStore Pro应用程序指向WordPress实例，请使用任何文本编辑器打开AppConfig.json文件。 在WooCommerce对象内部，将url键更新为WordPress实例的URL。 然后将consumerKey和consumerSecret更新为上一步中生成的字符串。
"WooCommerce": {
"url": "https://example.com/wordpress/",
"consumerKey": "ck_28ed657b985de90f4ec9229f32d4ce73411251121100",
"consumerSecret": "cs_89bd6677fe547e587115b21e95a4172777ffa22910"
}如果您现在在手机上重新加载应用程序，则应该能够看到您自己的WooCommerce商店中的商品。
6.自定义应用
MStore Pro是高度可定制的。 可以通过对其配置文件进行细微更改来修改其用户界面的各个方面。
例如，要将MStore Pro的徽标替换为您自己公司的徽标，您必须在Config.js文件中进行更改。 更具体地说，您必须更改LogoImage ， LogoWithText和LogoLoading属性的值。
LogoImage: require("@images/my-logo-main.png"),
LogoWithText: require("@images/my-logo-with-text.png"),
LogoLoading: require("@images/my-logo-main.png"),在进行上述更改之前，请确保新图像出现在src / images目录中。
这是带有自定义徽标的应用的屏幕截图：
要更改应用程序UI组件的颜色，必须修改Color.js文件。 例如，如果要更改选项卡栏中显示的图标的颜色，请更改tabbarColor属性。 同样，要更改当前活动选项卡图标的颜色，请更改tabbarTint属性。
但是，如果要更改应用程序的整体主题，则必须修改Theme.js文件。 它具有直观命名的属性，例如primary ， accent和background ，您可以更改这些属性以快速对应用程序的外观进行重大更改。
请注意，MStore Pro具有内置的深色主题。 要激活它，请在应用程序内部，导航到“ 用户个人资料”标签，然后打开“ 黑暗主题”开关。
MStore Pro还使您可以轻松更改屏幕的文本内容。 例如，您可能已经注意到，简介屏幕上仍然提到“ MStore”，而不是您的公司名称。 要解决此问题，请打开Config.js文件并查找intro数组。 此数组中的每个项目都定义了简介页的内容。
要修改介绍页面显示的文本，请更新其title和text属性。 要更改其显示的icon ，请更改icon属性。 Icons.js文件列出了icon属性的所有有效值。
{
key: "page1",
title: "Welcome to My Fashion Store",
text: "Trendy Outfits for Millennials",
icon: "ios-cart",
colors: ["#0FF0B3", "#036ED9"],
}经过上述更改，介绍页面将如下所示：
结论
您现在知道如何使用MStore Pro（功能丰富的React Native应用程序模板）快速为您的在线业务创建电子商务应用程序。 在本教程中，您还学习了如何配置WordPress实例和WooCommerce与MStore Pro进行通信。
635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
