带有Antiqueruby React Native组件的精美材质设计应用程序

最新推荐文章于 2025-04-27 14:49:16 发布

cunjie3951

最新推荐文章于 2025-04-27 14:49:16 发布

阅读量452

点赞数

文章标签： python java android vue react ViewUI

CodeCanyon有很多高级的React Native应用模板和组件库，尽管它们可以使您的生活更轻松。在我看来， Antiqueruby React Native是其中最全面的。这个庞大的模板由Alian Software开发，可提供数百种与Material Design兼容的布局，您可以在应用程序中使用它们。此外，将其与WordPress博客和WooCommerce网站集成非常容易。而且，如果您对获利感兴趣，它支持内置的AdMob广告。

在本教程中，我将向您展示如何安装Antiqueruby React Native并使用其某些组件和布局。

先决条件

为了能够跟进，您需要：

Envato帐户
最新版本的Node.js和React Native CLI
最新版本的Android Studio
运行最新版Android的设备或模拟器
对React Native框架的基本了解

1.设置模板

Antiqueruby React Native是CodeCanyon上的畅销书。要获取它，请登录到您的Envato帐户并购买许可证。完成此操作后，您将能够将模板下载为名为codecanyon-zBpcGaL5-antiqueruby-react-native.zip的ZIP文件。

因为它的大小接近1.6 GB，所以如果您的Internet连接速度较慢，则下载可能需要一段时间才能完成。

提取文件时，您会看到它包含另外两个ZIP文件： Documentation_V2.12.zip （具有模板的所有文档）和Antiqueruby_Code_V2_12.zip （具有实际的代码）。对于本教程，您只需要将后者提取到一个新目录中。

要在Linux或macOS上执行此操作，可以运行以下命令：

mkdir my_project && cd my_project
unzip ~/Downloads/Antiqueruby_Code_V2_12.zip

接下来，您必须使用npm安装模板依赖的所有Node.js软件包。

npm install

最后，使用文本编辑器打开android / local.properties文件，并更新sdk.dir属性的值，使其指向您安装Android SDK的位置。

sdk.dir=/home/me/Android/Sdk

2.运行项目

要查看模板在您的移动设备上的外观，首先通过运行以下命令启动Metro Bundler：

react-native start

这可能需要一两分钟，因为该模板包含数千个文件。在某些计算机上，您甚至可能会遇到ENOSPC错误，说已达到文件监视程序的系统限制。要解决该错误，您可以尝试通过向Metro.config.js文件中添加以下代码来排除一些中间文件：

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([/intermediates\/.*/])
  }
};

或者，可以通过更新/etc/sysctl.conf文件中的fs.inotify.max_user_watches属性的值来增加文件监视程序的最大数量。

捆绑程序完成依赖关系图的加载后，就可以继续运行模板了。

react-native run-android

如果您的Android开发环境是最新的并且配置正确，那么您现在应该可以在设备上看到此信息：

3.探索可用的布局

您可以使用Antiqueruby React Native模板来创建许多不同类型的应用程序。对于每个应用类别，它都有几种可用的布局。您可以立即在设备上查看所有这些内容。

例如，您可以按“ 常规材质” UI按钮查看所有可用的常规布局。

默认情况下，系统会为您提供查看登录页面可用的所有漂亮布局的选项。

但是，通过单击“汉堡包”按钮，您可以打开一个菜单，让您选择其他类型的布局。例如，您可以单击“ 注册”选项以查看注册页面的布局。

您不必将自己仅限于通用的“材料设计”布局。该模板还包括非常适合特定类型的应用程序的布局。例如，如果您要为WordPress博客创建应用，请在主屏幕上按WordPress博客按钮。

该模板还提供了许多特定于域的布局。有了它们，您可以轻松创建约会应用程序，食品交付应用程序，与加密货币相关的应用程序，社交应用程序等。您也可以从主屏幕上查看这些布局。例如，您可以按Food Material UI按钮查看构建食品交付应用程序时通常需要的布局。

4.了解项目结构

您必须先了解模板的结构，然后才能在自己的应用程序中使用Antiqueruby React Native布局或组件。除了React Native项目拥有的所有常见文件和目录外，此模板还有一个名为App的目录。这是其大部分可重用代码所在的位置。

~/my_project/App/
|-- Components
|-- Containers
|-- Themes
|-- Fonts
 -- Images

顾名思义，其中的Components目录包含各种Material Design组件，例如警报消息，按钮，日历和图表。您可以使用这些组件从头开始创建自己的自定义布局。

在Containers目录中，您可以找到所有手工制作的高级版面的代码。例如，其中的SignIn目录包含我们之前查看的所有登录布局的代码。同样， Blog目录包含所有与WordPress相关的布局的代码。

Themes目录包含JavaScript文件，这些文件可让您更改布局的整体外观。使用它，您可以更改详细信息，例如字体，颜色和边距。

最后，“ 字体和图像”目录包含在布局中使用的资产。

5.使用布局

默认情况下，模板会加载App组件，该组件除了显示所有可用的布局外什么也不做。这是您在较早的步骤中运行项目时所看到的。要使用模板创建自己的应用，您需要更改此行为。

因此，打开index.js文件并清空其内容。在执行此操作之前，请随时创建文件的备份。然后，像往常一样，通过向其添加以下import语句来导入React框架和React Native组件：

import * as React from 'react';
import * as RN from 'react-native';

接下来，假设我们要在我们的应用程序中显示登录布局。在模板提供的所有14种此类布局中，让我们使用第三个布局： Signin_03 。通过添加以下代码导入它：

import Signin_03 from './App/Containers/SignIn/Signin_03';

然后通过扩展React.Component类并覆盖其render()方法来创建一个新组件。在该方法内部，您所需要做的就是返回<Signin_03>组件。这是如何做：

export default class MyApp extends React.Component {
    render() {
        return (
            <Signin_03/>
        );
    }
}

最后，不要忘记通过调用registerComponent()方法来注册新组件。

RN.AppRegistry.registerComponent('Antiqueruby', () => MyApp);

此时，如果您运行应用程序，则应该可以直接看到登录屏幕。

当然，要更改布局的内容，必须对App / Containers / SignIn / Signin_03目录中存在的index.js文件进行更改。

6.使用组件

导入和使用组件就像导入和使用布局一样容易。例如，如果要在应用程序中使用Calendar组件，请首先将其导入，如下所示：

import Calendar from './App/Components/Calendar/CalendarStrip';

然后，在render()方法内部，将<Calendar>组件添加到组件树。（可选）您可以将其放置在<View>组件内，并提供一些样式。

<RN.View>
    <Calendar
        style={{ height: 200 }}
        calendarHeaderStyle={{ color: "#555555" }}
        dateNumberStyle={{ color: "#333333" }}
        highlightDateNumberStyle={{ color: "#FF0000" }}
        highlightDateNameStyle={{ color: "#990000" }}
    />
</RN.View>

使用上面的代码，您应该看到一个交互式日历条，如下所示：