React Native:入门知识了解

什么是React Native

React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。React Native使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。React Native使你只使用JavaScript也能编写原生移动应用。它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。

想要了解更多,可以深入学习下

  • React Native官方网站
  • React Native 中文网
  • react-native github

React Native 的基础是React, React是在 web 端非常流行的开源 UI 框架。要想掌握 React Native,先了解 React 框架本身是非常有帮助的,如果你想更深一步学习,我建议你阅读React 的官方文档,

如何跨平台

React Native使用JavaScript语言进行开发,通过JavaScript引擎JavaScriptCore在原生平台中运行JavaScript代码。JavaScript层负责应用程序的逻辑和界面渲染,可以通过调用原生平台的API来实现与原生组件的交互。
每个平台(iOS和Android)都有自己的原生组件集,这些组件是用该平台特定的编程语言(如Swift和Java)编写的。React Native通过JavaScriptCore引擎与这些原生组件进行通信,从而在应用程序中使用它们。这样,开发者可以使用JavaScript和React编写代码,同时使用原生组件来实现应用程序的外观和功能。
但是Android使用JavaScriptCore存在性能问题。为了解决这个问题,2019年Facebook引入了新的JavaScript引擎Hermes
在这里插入图片描述

JSX 语法

JSX 语法是一种 JavaScript 语法扩展,它允许你在 JavaScript 代码中编写类似于 HTML 的结构。它是一种语法糖,使你在 JavaScript 中创建和操作对象和变量时,能够以更直观和易于理解的方式进行。

JSX 语法使用大括号 {} 来包围 JavaScript 表达式,从而允许在 JavaScript 代码中直接书写 HTML 标签。通过这种方式,你可以在 JSX 中直接使用 JavaScript 变量、函数和表达式。

const name = 'John';  
const age = 30;  
  
return (  
  <div>  
    <h1>{name}</h1>  
    <p>{age}</p>  
</div>  
);

React 和 React Native 都使用JSX 语法,关于JSX更多的学习,可以参考React JSX

JavaScript 和 TypeScript

2023年1月14日,React Native官方发布了0.71版本,默认开发语言为TypeScript(之前是JavaScript)。目前最新版本是0.73.0(2023年12月13日)。

JavaScript和TypeScript的主要区别在于以下几点:

  1. 类型系统: JavaScript是一种动态类型语言,变量的类型可以在运行时改变。而TypeScript是一种静态类型语言,变量在声明时必须指定类型,并且在整个生命周期中保持不变。
  2. 编译需求: JavaScript是解释型语言,不需要编译就可以运行。而TypeScript需要先编译成JavaScript,然后才能在浏览器或Node.js环境中运行。
  3. 类型推断: TypeScript具有更强大的类型推断功能,可以在不显式声明变量类型的情况下,根据上下文推断出变量的类型。而JavaScript的类型推断相对较弱,需要显式声明变量类型。
  4. 接口和类: TypeScript支持接口(Interfaces)和类(Classes),这些是JavaScript所没有的特性。这使得TypeScript更适合大型项目和面向对象的编程风格。
  5. 可选的静态类型: 虽然TypeScript是静态类型的,但它的类型检查是可选的。你可以在TypeScript代码中混合使用静态类型和动态类型,这使得TypeScript在灵活性上超过了纯JavaScript。
  6. 更严格的错误检查: TypeScript的编译器可以对代码进行更严格的错误检查,可以帮助开发者在早期发现并修复潜在的问题。

深入学习JavaScript。
深入学习TypeScript。

文件类型

在React Native开发中使用TypeScript语言,JSX语法,每个包含 JSX 的文件都必须使用 .tsx 文件扩展名(例:index.tsx)。这是一个 TypeScript 特定的扩展,告诉 TypeScript 该文件包含 JSX。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

功能更新|免费敏捷工具Leangoo领歌私有部署新增第三方身份认证和API对接

Leangoo领歌是一款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 Leangoo支持敏捷研发管理全流程&#xff0c;包括小型团队敏捷开发&#xff0c;规模化敏捷SAFe&#xff0c;Scr…

windows数据备份方法

信息时代数据已成为个人及企业的重要资产&#xff0c;数据丢失或者损坏会带来无法弥补的损失。数据安全主要关注两个方面数据容灾和数据备份。容灾的目的是防止硬件发生错误&#xff0c;通过多个相同或类似硬件避免单一硬件故障造成的数据丢失。数据备份除了可以防止单一硬件错…

使用QT基于YMODEM协议实现串口文件发送(和xshell互通)

背景 项目需要用QT实现一个YMODEM文件传输的功能&#xff0c;目标下位机是MCU嵌入式设备&#xff0c;且下位机程序已经经过xshell传输文件的验证。 YMODEM 简介 YMODEM协议是一个文件传输协议&#xff0c;常用于嵌入式设备。本文不对YMODEM做过多的阐述&#xff0c;阅读需建…

Tomcat主配置文件(server.xml)详解

前言 Tomcat主配置文件&#xff08;server.xml&#xff09;是Tomcat服务器的主要配置文件&#xff0c;文件位置在conf目录下&#xff0c;它包含了Tomcat的全局配置信息&#xff0c;包括监听端口、虚拟主机、安全配置、连接器等。 目录 1 server.xml组件类别 2 组件介绍 3 se…

003 FeedForward前馈层

一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17torch 1.13.1cu117torchvision 0.14.1cu117 二、前馈层原理 Transformer模型中的前馈层&#xff08;Feed Forward Layer&#xff09;是其关键组件之一&#xff0c;对于模型的性能起着重要作用。下面将用900字对…

cpp:1:10: fatal error: opencv2/core.hpp: 没有那个文件或目录

前言&#xff1a; 我按照官网方法安装了opencv&#xff0c;运行的也是官网的测试代码&#xff1a; #include <opencv2/core.hpp> #include <opencv2/highgui.hpp> using namespace cv; int main() {printf("hello world")return 0; }

boost1.55 安装使用教程 windows

第一步 &#xff1a;首先在boost官网上下载库压缩包 添加链接描述 选择自己需要的版本进行下载 解压后执行booststrap.bat 用来生成创建b2.exe 和bjam.exe 拓展&#xff1a;.\b2 --help 了解一下有哪些参数可以配置 默认b2.exe编译后&#xff0c;链接到项目如果出现如下错误…

VLAN基本原理

目录 一、VLAN概念及优势 &#xff08;一&#xff09;基本理念 &#xff08;二&#xff09;VLAN的特点 二、VLAN ID 种类、范围及用途 &#xff08;一&#xff09;静态VLAN &#xff08;二&#xff09;动态VLAN &#xff08;三&#xff09;VLAN三种端口类型 &#xff0…

深入理解Java虚拟机---类加载机制

类加载机制 什么是类加载机制类加载的时机类加载的过程加载验证文件格式验证元数据验证字节码验证符号引用验证 准备解析初始化 类加载器双亲委派模型 什么是类加载机制 虚拟机把描述类的数据从 Class 文件加载到内存&#xff0c;并对数据进行校验、转换解析和初始化&#xff…

centOS安装bochsXshell连接centos启动可视化界面

centOS安装bochs 参考&#xff1a;https://blog.csdn.net/muzi_since/article/details/102559187 首先安装依赖环境&#xff1a; yum install gtk2 gtk2-devel yum install libXt libXt-devel yum install libXpm libXpm-devel yum install SDL SDL-devel yum install libXr…

已解决:No goals have been specified for this build. You must specify a vali

[ERROR] No goals have been specified for this build. You must specify a valiTOC 完整报错 No goals have been specified for this build. You must specify a valid lifecycle phase or a goal in the format : or :[:]:. Available lifecycle phases are: pre-clean, c…

6. Service详解

6. Service详解 文章目录 6. Service详解6.1 Service介绍6.2 Service类型6.3 Service使用6.3.1 实验环境准备6.3.2 ClusterIP类型的Service6.3.3 HeadLess类型的Service6.3.3.1 deployment和statefulset区别6.3.3.2 statefulset deployment 区别 6.3.4 NodePort类型的Service6.…

Trace 在多线程异步体系下传递

JAVA 线程异步常见的实现方式有&#xff1a; new ThreadExecutorService 当然还有其他的&#xff0c;比如fork-join&#xff0c;这些下文会有提及&#xff0c;下面主要针对这两种场景结合 DDTrace 和 Springboot 下进行实践。 引入 DDTrace sdk <properties><java.…

湖农大邀请赛shell_rce漏洞复现

湖农大邀请赛 shell_rce 复现 在 2023 年湖南农业大学邀请赛的线上初赛中&#xff0c;有一道 shell_rce 题&#xff0c;本文将复现该题。 题目内容&#xff0c;打开即是代码&#xff1a; <?phpclass shell{public $exp;public function __destruct(){$str preg_replace…

Shopify怎么避免被封店?封店原因有哪些?

市场研究的一份报告显示&#xff0c;全球跨境电子商务市场预计到2028年将达到30422亿美元&#xff0c;其中&#xff0c;亚太地区是最大的跨境电商市场&#xff0c;据海关统计数据&#xff0c;近五年来&#xff0c;我国跨境电商进出口增长近10倍。跨境电商业务新的增长风口已经到…

图像去噪——PMRID训练自己数据集及推理测试(详细图文教程)

目录 一、源码包准备二、数据集准备2.1 提取数据集名称2.2 .txt报错问题2.2.1 正确格式2.2.2 错误格式 三、修改配置参数四、训练及保存模型权重4.1 训练4.2 保存模型权重文件 五、模型推理测试5.1 导入测试集5.2 测试5.3 测试结果5.3.1 测试场景15.3.2 测试场景2 5.4 推理速度…

jsp+servlet+图书交流平台 有filter过滤器

在线图书推荐与交流平台 随着数字化的进展和人们对持续学习的追求&#xff0c;在线资源变得越来越受欢迎。对于众多读者来说&#xff0c;找到合适的书籍和与其他读者交流阅读体验是非常有价值的。为了满足这一需求&#xff0c;我们提出了一个在线图书推荐与交流平台的设计。此…

千梦网创:赚钱就是服侍好双爹

“爹啊&#xff0c;我没钱用啦&#xff0c;给我啃一下。” 想赚钱&#xff0c;最快的方式就是啃爹。 不管你做什么项目&#xff0c;同行永远都是我们的爹。 跟着爹走&#xff0c;有吃有喝不用愁。 跟着老爹走&#xff0c;蛋花汤里加骨头。 小时候父亲总是把我们高高的举过…

查询mysql服务器当前时区设置、session当前时区设置

使用命令SELECT global.time_zone;可以查询mysql服务器的当前时区设置&#xff0c;例如&#xff1a; 使用命令SELECT session.time_zone;可以查询session的当前时区设置&#xff0c;例如&#xff1a;

Vue 3 开发中遇到的问题及解决方案(fix bug)

开发环境&#xff1a;mac系统&#xff0c;node版本&#xff1a; 16.15.0 版本兼容问题 vite v3.2.4 building for development... hasInjectionContext is not exported by node_modules/pinia/node_modules/vue-demi/lib/index.mjs, imported by node_modules/pinia/dist/pini…