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

news2024/11/18 5:27:56

目录

  • 一、移动开发和web开发的区别
  • 二、什么是React Native?
  • 三、如何实现安卓和IOS用一套代码开发
  • 四、React Native开发实战
    • 1. 安装Android studio
    • 2. 使用Expo创建工程
    • 3. 启动
    • 4. 使用UI框架React Active Elements
    • 5. 扩展：使用UI框架antd Design Mobile RN
  • 五、项目结构
    • 1. 小项目
    • 2. 中型项目
    • 3. 大型项目
  • 六、进阶
  • 七、相关资料

文章已收录至https://lichong.work，转载请注明原文链接。
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 构建块。
React Native

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

四、React Native开发实战

1. 安装Android studio

下载地址：https://developer.android.google.cn/studio/
Android studio是安卓应用的开发工具，安装它是为了帮助我们自动安装Android SDK和虚拟化套件，不需要一个个手动下载。
在这里插入图片描述

安装studio，一直点击下一步：
在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

之后一直下一步就行了，然后内存大的可以将内存设置调大一点。
配置环境变量：
在这里插入图片描述

新增Path变量：
在这里插入图片描述

2. 使用Expo创建工程

地址：https://docs.expo.dev/tutorial/create-your-first-app/
使用维护TypeScript模板的Expo创建模板工程，执行：

yarn create expo-app --template

选择模板工程
在这里插入图片描述

命名项目名称
在这里插入图片描述

安装成功
在这里插入图片描述

3. 启动

将package.json中启动命令加入--clear（启动时清上次缓存，防止一些情况的报错）
在这里插入图片描述

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

启动项目
在这里插入图片描述

输入"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

地址：https://reactnativeelements.com/
安装依赖：

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

在这里插入图片描述

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

地址：https://rn.mobile.ant.design/docs/react/introduce-cn
安装：

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

七、相关资料

expo：https://docs.expo.dev/tutorial/create-your-first-app/
react navigation导航框架：https://reactnavigation.org/docs/getting-started/
安卓开发工具：https://developer.android.google.cn/studio/
UI框架 React Native Elements：https://reactnativeelements.com/
UI框架 Ant Design Mobile RN：https://rn.mobile.ant.design/index-cn/

文章已收录至https://lichong.work，转载请注明原文链接。
ps：欢迎关注公众号“Fun肆编程”或添加我的私人微信交流经验🤝

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~往期精选🪶~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

【Docker】入门教程-基本概念解读
【前端-开发环境】使用NVM实现不同nodejs版本的自由切换（NVM完整安装使用手册）
【前端-NPM私服】内网使用verdaccio搭建私有npm服务器
【前端-IE兼容】Win10和Win11使用Edge调试前端兼容IE6、IE7、IE8、IE9、IE10、IE11问题
【前端-工程化】React项目工程化记录-内置项目活文档(老项目升级优化-集成Hosky/ESLint/Prettier-升级Webpack/Babel/NodeSass/React)
【工具-TWRP-frp-Termux】旧手机暴改成免费云服务器-MIUI刷TWRP安装magisk获取root
【工具-Shell脚本】java程序产品包模板-linux和windows通用shell启动停止脚本(无需系统安装Java运行环境)
【工具-Nginx】从入门安装到高可用集群搭建
【工具-Nginx】Nginx高性能通用配置文件-注释版-支持防刷限流、可控高并发、HTTP2、防XSS、Gzip、OCSP Stapling、负载、SSL
【工具-WireShark】网络HTTP抓包使用教程
【后端-maven打包】通过profile标签解决同时打jar包 war包需求
【架构-DDD】使用领域驱动设计-互联网未来架构设计之道（一）
【后端-SpringCache】基于Spring Cache封装一个能够批量操作的Redis缓存记录下踩坑历程（pipeline或mget封装）
【后端-SkyWalking】SkyWalking前后端开发环境搭建详细教程步骤-6.x/7.x/8.x版本通用-插件二次开发利器（一）
【后端-Quartz】Springboot整合Quartz支持集群环境-设计业务与框架分离及实现定时任务调度

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

👇👇👇

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/111362.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Hadoop综合项目——二手房统计分析（Hive篇）

Hadoop综合项目——二手房统计分析（Hive篇）

Hadoop综合项目——二手房统计分析（Hive篇） 文章目录Hadoop综合项目——二手房统计分析（Hive篇）0、 写在前面1、Hive统计分析1.1 本地数据/HDFS数据导入到Hive1.2 楼龄超过20年的二手房比例1.3 四大一线城市各楼层地段的平均价格1…
阅读更多...
没有基础转行学编程，靠谱吗？能找到工作吗？

没有基础转行学编程，靠谱吗？能找到工作吗？

在日常生活中，以及在知乎上，有很多人咨询职业生涯的抉择。他们大都对自己的职业现状不满意，打算学习编程成为一名程序员。 为什么想要做程序员？ 答案五花八门，其中「工资高」「好找工作」「有职业发展」是很常见的理由…
阅读更多...
代码质量管理平台实战| SonarQube 安装、配置及 JaCoCo、Maven 集成

代码质量管理平台实战| SonarQube 安装、配置及 JaCoCo、Maven 集成

SonarQube 是一个用于代码质量管理的开源平台，用于管理源代码的质量。同时 SonarQube 还对大量的持续集成工具提供了接口支持，可以很方便地在持续集成中使用 SonarQube。此外， SonarQube 的插件还可以对 Java 以外的其他编程语言提供支持&…
阅读更多...
请求量太大扛不住怎么办？进来学一招

请求量太大扛不住怎么办？进来学一招

hello，大家好呀，我是小楼。 上篇文章《一言不合就重构》 说了我最近重构的一个系统，虽然重构完了，但还在灰度，这不，在灰度过程中又发现了一个问题。 背景 这个问题简单说一下背景，如果不明白…
阅读更多...
数据结构之排序【直接插入排序和希尔排序的实现及分析】

数据结构之排序【直接插入排序和希尔排序的实现及分析】

引言： 今天天气还是依然的冷，码字越来越不容易了，本来上次写了一个比较好的引言，但是因为电脑第二天没电，并且我没有保存，现在找不到了，所以今天我们的引言就这样吧！今天给大家介绍…
阅读更多...
Zookeeper 4 Zookeeper JavaAPI 操作 4.3 Curator API 常用操作【添加节点】

Zookeeper 4 Zookeeper JavaAPI 操作 4.3 Curator API 常用操作【添加节点】

Zookeeper 【黑马程序员Zookeeper视频教程，快速入门zookeeper技术】 文章目录Zookeeper4 Zookeeper JavaAPI 操作4.3 Curator API 常用操作4.3.1 添加节点4 Zookeeper JavaAPI 操作 4.3 Curator API 常用操作 4.3.1 添加节点 直接开始编写 测试方法 先写一下&a…
阅读更多...
Web入门开发【五】- 线上部署

Web入门开发【五】- 线上部署

欢迎来到霍大侠的小院，我们来学习Web入门开发的系列课程。 首先我们来了解下这个课程能学到什么？ 1、你将可以掌握Web网站的开发全过程。 2、了解基础的HTML，CSS，JavaScript语言。 3、开发自己的第一个网站。 4、认识很多对编…
阅读更多...
南卡与JBL蓝牙耳机哪款比较好？数码资深玩家带你深度评测了解

南卡与JBL蓝牙耳机哪款比较好？数码资深玩家带你深度评测了解

马上到来2023新的一年，不会还有人使用传统有线耳机吧？那你就属最落后的那位了，随着生活水平的提高，科技的快速发展，有线耳机逐渐被真无线蓝牙耳机所取代。现在走在马路上都能看见许多人佩戴着耳机，然而&…
阅读更多...
机器学习 | 朴素贝叶斯

机器学习 | 朴素贝叶斯

一.基本原理 基于条件独立的假设，先计算输入和输出的联合概率密度，然后根据所输入的x计算y的概率，然后选择具有最大后验概率的类作为它的类别 二.优缺点 优点 小规模数据集表现好，适合多分类对于在小数据集上有显著特征的相关对…
阅读更多...
Scikit-network-02：载图

Scikit-network-02：载图

载图 在Scikit网络中，图形由其scipy的压缩稀疏行格式中的邻接矩阵（或二部图矩阵）表示。在本教程中，我们提供了一些方法来实例化此格式的图。 from IPython.display import SVGimport numpy as np from scipy import sparse impo…
阅读更多...
SQL注入渗透与攻防（九）之布尔盲注

SQL注入渗透与攻防（九）之布尔盲注

目录 1.什么是布尔盲注？ 2.如何进行布尔盲注？ 案列演示： 1.什么是布尔盲注？ Web的页面的仅仅会返回True和False。那么布尔盲注就是进行SQL注入之后然后根据页面返回的True或者是False来得到数据库中的相关信息。 我们这里拿sql…
阅读更多...
15Python文件操作

15Python文件操作

文件处理 01. 文件的概念 1.1 文件的概念和作用 计算机的 文件，就是存储在某种 长期储存设备 上的一段 数据长期存储设备包括：硬盘、U 盘、移动硬盘、光盘… 1.2 文件的存储方式 在计算机中，文件是以 二进制 的方式保存在磁盘上的 文本…
阅读更多...
论文理解--DEEP COMPRESSION

论文理解--DEEP COMPRESSION

原文链接： https://github.com/mit-han-lab/amc/security https://zhuanlan.zhihu.com/p/108096347 https://zhuanlan.zhihu.com/p/510905067 摘要 结论： 1、deep compression:由三阶段pipeline组成：pruning(剪枝)、 trained quantilization…
阅读更多...
452页24万字智慧城市顶层设计及智慧应用解决方案

452页24万字智慧城市顶层设计及智慧应用解决方案

智慧城市总体设计 2.1 智慧城市核心技术 2.1.1 物联网 智慧城市是一个有机结合的大系统，涵盖了更透切的感知、更全面的互连，更深入的智能。物联网是智慧城市中非常重要的元素，它侧重于底层感知信息的采集与传输，城市范围内泛在网方…
阅读更多...
无需调用Tecplot，PFC后处理技巧为你plot精美科研图

无需调用Tecplot，PFC后处理技巧为你plot精美科研图

导读：PFC提供了非常美观的可视化处理的窗口—plot，用户可以在这里对模型的运行状态进行检查，也可以将Plot中的视图输出进行处理。一般来说plot中的图片质量足够用于常规的论文配图，当然用户也可以导出数据到tecplot中进行后处理&a…
阅读更多...
【UE4 第一人称射击游戏】08-使用“AK47”发射子弹

【UE4 第一人称射击游戏】08-使用“AK47”发射子弹

上一篇： 【UE4 第一人称射击游戏】07-添加“AK47”武器 本节效果： 步骤： 1.在“Blueprints”文件夹内添加一个Actor蓝图，命名为“Projectile_Base”，该蓝图用于表示子弹 双击打开“Projectile_Base”，添加…
阅读更多...
期货开户的身份识别验证

期货开户的身份识别验证

无论你是开通商品期货、原油期货还是股指期货以及期权，现在都支持网上办理！原油期货和股指期货以及期权品种都是在商品期货账户的基础上满足条件后再另外开通交易权限。叁格期权小编在这里为各位投资者详细介绍商品期货网上开户流程。 一、开户前准备 …
阅读更多...
文件透明加密，保护重要数据的安全性

文件透明加密，保护重要数据的安全性

各种泄露事件使人们对信息安全问题的高度关注，随着加密技术的不断完善，主流透明加密技术被广泛应用于企业加密软件中。那么，这个技术如何保护电脑？有什么优点？ 文件透明加密是最近几年发展出来的一种文件加解密技术。所…
阅读更多...
RK3568平台开发系列讲解（工具命令篇）vim 编辑器的使用

RK3568平台开发系列讲解（工具命令篇）vim 编辑器的使用

🚀返回专栏总目录 文章目录 一、vim 编辑器有三种模式二、vim 编辑器移动光标三、vim 编辑器支持快速定位四、vim 编辑器的文本的复制和粘贴五、vim 编辑器使用快捷键来复制六、vim 编辑器的删除七、vim 编辑器的撤销八、vim 编辑器的查找九、vim 编辑器的替换十、vim 编辑器…
阅读更多...
四、GradCAM可解释性分析——可解释性机器学习（DataWhale组队学习）

四、GradCAM可解释性分析——可解释性机器学习（DataWhale组队学习）

目录CAM算法回顾CAM算法流程CAM算法的精妙之处CAM算法的缺点GradCAMGrad-CAM算法的优点：Grad-CAM算法的缺点：Grad-CAM算法的改进Grad-CAM算法Score-CAM算法LayerCAM算法总结CAM算法回顾 CAM算法流程 输入原始图像，经过多层无池化的全卷积神经…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023