技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

前端-React-Native移动端原生开发整合React-Native-Elements教程-安卓示例

 收录于 前端
   约 2768 字   预计阅读 6 分钟 
https://bing.ee123.net/img/rand?artid=128418902

【前端-React Native】移动端原生开发整合React Native Elements教程-安卓示例

目录

文章已收录至 ，转载请注明原文链接。

ps：欢迎关注公众号“Fun肆编程”或添加我的私人微信交流经验🤝

一、移动开发和web开发的区别

移动前端开发和web开发都属于前端开发的范围。

  • 一般我们在开发pc端web项目时，需要考虑这么几点：
    • 语言和UI库选型
    • 浏览器的兼容性
    • 构建速度
    • 打包体积
    • SEO优化
    • …

不难发现，PC端web开发工作重点主要都在 代码 和 工程化 上。

  • 移动开发时，就目前来说，需要关注的内容有所增加：
    • 浏览器兼容性上我们只需要考虑webkit内核的浏览器和chrome，uc，qq，小米手机浏览器就好了
    • 打包发布需要有规范化的流程（特别是IOS的发布，我们并不会像传统web一样可以频繁发版）
    • 前期投入上需要更慎重些，比如说技术选型，在Flutter被炒的如火如荼的今天，我们是更想要uni-app的一套代码跨平台快速开发的特性来外包项目或者小程序，还是更想要React Native的这种原生应用做属于自己的产品？

总之，移动端的开发不仅需要投入更多的学习成本在 代码 和 工程化 上，还需要重视 跨平台 、 版本管理 等。

二、什么是React Native?

React Native (RN)是一个用于构建跨平台应用程序的 JavaScript 框架。2015年由facebook开源，社区驱动。RN使用 React 为 Android、iOS 等创建原生应用，现在甚至已经探索出了包括React Native Windows、React Native macOS和React Native Web等新的项目，支持更多的平台。

三、如何实现安卓和IOS用一套代码开发

React Native 提供了一组与平台无关的核心原生组件，例如 View 、 Text 和 Image 直接映射到平台的原生 UI 构建块。

https://i-blog.csdnimg.cn/blog_migrate/66b82c2637535a0237c7229318ece3e4.png

简单讲，就是 RN 在Android端构建时会把 View 编译为 AndroidView ，IOS端构建时会把 View 编译为 IOSView ，在开发人员视角，我们只需要知道RN包装的 View 组件即可。

四、React Native开发实战

1. 安装Android studio

下载地址：

Android studio是安卓应用的开发工具，安装它是为了帮助我们自动安装Android SDK和虚拟化套件，不需要一个个手动下载。

https://i-blog.csdnimg.cn/blog_migrate/c1cd21d3dcb270d81335fe2c36efa2d7.png

安装studio，一直点击下一步：

https://i-blog.csdnimg.cn/blog_migrate/79b8f12f49cb35ca0f30f3cb0488a78c.png

安装完成后打开studio会弹出初次设置：

https://i-blog.csdnimg.cn/blog_migrate/a667c385a498ca631029186c28a8b1f5.png

https://i-blog.csdnimg.cn/blog_migrate/ba8ba7190524594e267a097f43ad598a.png

https://i-blog.csdnimg.cn/blog_migrate/2bd077925cbe0b8427bd537ef7293584.png

之后一直下一步就行了，然后内存大的可以将内存设置调大一点。

配置环境变量：

https://i-blog.csdnimg.cn/blog_migrate/7773eee915d1c0ee221ed6bb5e4b0f5f.png

新增Path变量：

https://i-blog.csdnimg.cn/blog_migrate/89b44782a1399dc193823cfd83359a7f.png

2. 使用Expo创建工程

地址：

使用维护TypeScript模板的Expo创建模板工程，执行：

yarn create expo-app --template

选择模板工程

https://i-blog.csdnimg.cn/blog_migrate/9d10bd45059b348e8caaf1c0dd0bd21c.png

命名项目名称

https://i-blog.csdnimg.cn/blog_migrate/11d3303070654d02939ceec7cd582100.png

安装成功

https://i-blog.csdnimg.cn/blog_migrate/107d6793eb71c12546915cf3a6edfa41.png

3. 启动

将package.json中启动命令加入 --clear （启动时清上次缓存，防止一些情况的报错）

https://i-blog.csdnimg.cn/blog_migrate/460411d47b6a3aa8d9427faebc9ff8f1.png

数据线连接手机，并打开手机的开发者模式，将开发者选项中的USB安装和USB调试打开，下图为小米手机，其他手机请百度：

https://i-blog.csdnimg.cn/blog_migrate/bc8e2bab85c44c3550a8eb94499b37f2.png

启动项目

https://i-blog.csdnimg.cn/blog_migrate/cd1a57020d02983c2ee775089c85acce.png

输入"a"就会在android手机上自动安装Expo Go应用，并打开你的项目

首次连接完成后，在同一局域网下，可拔掉数据线，通过Expo中的扫码形式预览项目

如果需要不使用手机，只在PC浏览器端查看项目，通过键入"w"可在预览web形式的项目，但在此之前运行如下命令安装依赖，否则启动失败：

（本机使用了node16，测试在node18下会报错）

yarn add react-dom react-native-web --save

yarn add @expo/webpack-config --save-dev

npx expo install react-dom react-native-web @expo/webpack-config

4. 使用UI框架React Active Elements

地址：

安装依赖：

yarn add @rneui/themed @rneui/base
# elements的api
# https://reactnativeelements.com/docs/components/button

https://i-blog.csdnimg.cn/blog_migrate/471b095dfbacf292a65e0308e5422ea0.png

5. 扩展：使用UI框架antd Design Mobile RN

地址：

安装：

yarn add @ant-design/react-native --save

引入组件：

方式一：

import Button from '@ant-design/react-native/lib/button';

方式二（推荐）：

1）安装babel相关依赖：

yarn install babel-plugin-import --save-dev

2）添加babel.config.js的配置

{
  "plugins": [
    ["import", { libraryName: "@ant-design/react-native" }] 
  ]
}

3）按需引入组件即可

import { Button } from '@ant-design/react-native';

说明：有人反映通过 react-native init 创建的项目在使用时可能会报 Unable to resolve module react-dom 的错误 ，此时不妨安装 babel-plugin-module-resolver 试试~

五、项目结构

1. 小项目

当我们的应用程序很小时，我们通常将所有组件放在一个目录中：

MyApp
├── components
│   ├── Avatar.js
│   ├── Button.js
│   └── List.js
└── App.js

2. 中型项目

随着我们的应用程序的增长，我们通常会将“screens”组件分离到一个 screens 目录中，并开始进一步对 components 目录中的文件进行分类。“screens”组件应该占据整个屏幕，例如个人资料屏幕或设置屏幕。

如果使用着导航的库，例如： react-navigation ，我们可以将导航器/路由器组织到一个单独的 navigation 目录中（也可以叫 navigators 或 routing ）。

其他一些常见的文件类别：

api ：网络 API 调用，通常由提供商或路由组织

assets ：要与应用捆绑的图像和其他文件

hooks
自定义挂钩
reducers
reducer 函数，用于使用useReducer钩子（或其他库）管理应用程序数据

theme ：共享颜色和文本样式（有时称为styles）

utils
字符串格式化等杂项工具
MyApp
├── api
│   ├── twitter.js
│   ├── facebook.js
│   └── instagram.js
├── assets
│   ├── app-icon.png
│   └── splash-screen.png
├── components
│   ├── buttons
│   │   ├── RoundButton.js
│   │   └── SquareButton.js
│   ├── cards
│   │   ├── ArticleCard.js
│   │   ├── ImageCard.js
│   │   └── VideoCard.js
│   ├── Avatar.js
│   └── List.js
├── hooks
│   ├── useInterval.js
│   └── useLogin.js
├── screens
│   ├── Feed.js
│   ├── Search.js
│   ├── Post.js
│   ├── Reply.js
│   ├── Profile.js
│   └── Settings.js
├── navigation
│   ├── RootStackNavigator.js
│   └── ProfileTabNavigator.js
├── theme
│   ├── colors.js
│   ├── textStyles.js
│   └── spacing.js
├── utils
│   ├── generateUuid.js
│   └── formatCurrency.js
└── App.js
└── ...

3. 大型项目

当项目增长到包含许多不同的功能或 UI 流程时，通常会在顶层按功能对文件进行分类。如果多个团队在开发该应用程序，功能名称将经常与团队名称对齐：例如帐户、演化、隐私。

功能目录通常分组在 modules 、 packages 或 apps 目录下。在多个功能/团队之间共享的组件或实用程序通常位于其中的特殊目录 shared 或 core 目录中，并被视为公共 API。一个功能应该只引用它自己的目录或共享目录中的文件，而不是另一个功能目录中的文件——这表明该文件是移动到共享目录的候选者，并将其视为公共 API。

这个项目结构旨在为每个文件清楚地描述：它应该存在的地方，谁维护它，以及它是否被允许导入到其他功能中。

MyApp
├── modules
│   ├── accounts
│   │   ├── components
│   │   │   ├── UserProfile.js
│   │   │   └── LoginInput.js
│   │   ├── screens
│   │   │   ├── Profile.js
│   │   │   ├── Login.js
│   │   │   └── Deactivate.js
│   │   ├── utils
│   │   │   └── formatAccountName.js
│   │   └── App.js
│   ├── growth
│   │   ├── components
│   │   ├── screens
│   │   ├── utils
│   │   └── App.js
│   ├── privacy
│   │   ├── components
│   │   ├── screens
│   │   ├── utils
│   │   └── App.js
│   └── shared
│       ├── components
│       │   ├── Avatar.js
│       │   ├── Button.js
│       │   └── List.js
│       └── utils
│           └── format.js
└── App.js

六、进阶

React Native中除了基本的页面开发，还应该掌握导航、数据管理、本地存储、网络交互、动画、手势、原生调用等操作方式。仔细阅读 基本可以掌握。

七、相关资料

expo：

react navigation导航框架：

安卓开发工具：

UI框架 React Native Elements：

UI框架 Ant Design Mobile RN：

文章已收录至 ，转载请注明原文链接。

ps：欢迎关注公众号“Fun肆编程”或添加我的私人微信交流经验🤝

**往期精选🪶**

✨欢迎为耿直少年点赞、关注、收藏！！！

👇👇👇

更新于 2022-12-23
 前端框架, 前端, React, Native, Flutter, Android
返回 | 主页