React Native 面试问题与答案

2025年3月17日 | 阅读18分钟

下面列出了经常被问到的 React Native 面试问题和答案。

1) 解释 React Native?

React Native 是一个由 Facebook 推出的开源 JavaScript 框架。它用于为 iOS 和 Android 平台开发真实的、原生的移动应用程序。它只使用 JavaScript 来构建移动应用程序。它类似于 React,使用原生组件而不是 Web 组件作为构建块。它是跨平台的,允许你编写一次代码,然后在任何平台上运行。

React Native 应用程序基于 React(一个由 Facebook 开发的 JavaScript 库)和类似 XML 的标记(JSX)来创建用户界面。它针对的是移动平台而不是浏览器。它通过允许你使用单一语言 JavaScript 为 Android 和 iOS 平台构建应用程序,从而节省你的开发时间。


2) React Native 的优点是什么?

React Native 为构建移动应用程序提供了许多优点。下面列出了使用 React Native 的一些主要优点:

  • 跨平台: 它提供了“一次编写,到处运行”的功能。它用于为 Android、iOS 和 Windows 平台创建应用程序。
  • 性能: 用 React Native 编写的代码被编译成原生代码,这使得它能够为所有操作系统提供更接近原生的外观,并在所有平台上以相同的方式运行。
  • 社区: React Native 拥有一个庞大的充满热情的开发者社区,他们随时准备帮助我们修复随时出现的 Bug 和问题。
  • 热重载: 在开发过程中,对应用程序代码进行少量更改会立即可见。如果业务逻辑发生变化,其反映会实时重载到屏幕上。
  • 更快的开发: React Native 有助于快速开发应用程序。它使用一种通用语言为 Android、iOS 和 Windows 平台构建应用程序,这使得应用程序部署、交付和上市时间更快。
  • JavaScript: 使用 JavaScript 知识来构建原生移动应用程序。

3) React Native 的缺点是什么?

下面列出了 React Native 构建移动应用程序的一些主要缺点:

  • React Native 仍然很新且不成熟: React Native 是 Windows、Android 和 iOS 编程语言中的一个新框架。它仍处于改进阶段,这可能对应用程序产生负面影响。
  • 学习困难: React Native 无法快速学习,特别是对于应用程序开发领域的新手来说。
  • 缺乏安全性: React Native 是一个开源的 JavaScript 框架,它脆弱且在安全性方面存在缺陷。当您创建数据高度机密的银行和金融应用程序时,专家建议不要选择 React Native。
  • 初始化时间长: 即使您使用高科技小工具和设备,React Native 也需要很长时间才能初始化运行时。
  • 存在不确定: 由于 Facebook 开发了这个框架,它的存在是不确定的,因为它保留了随时终止项目的所有权利。随着 React Native 的流行度上升,这种情况不太可能发生。

4) 列出 React Native 的基本组件。

以下是 React Native 的核心组件:

  • View: 它是用于构建移动应用 UI 的基本内置组件。View 类似于 HTML 中的 div。它是一个内容区域,您可以在其中显示内容。
  • States: 它用于控制组件。可变数据可以存储在 state 中。它是可变的,意味着 state 可以随时更改值。
  • Props: Props 用于向不同的组件传递数据。它是不可变的,意味着 props 不能更改值。它在容器组件和展示组件之间提供连接。
  • Style: 它是 Web 或移动端中必不可少的组件,使应用程序具有吸引力。React Native 不需要任何特殊的语言或语法进行样式设置。它可以使用 JavaScript 对象来样式化应用程序。
  • Text: 此组件在应用程序中显示文本。它使用基本组件 textInput 从用户那里获取文本输入。
  • ScrollView: 它是一个滚动容器,用于托管多个视图。它可用于在带有滚动条的视图中渲染大型列表或内容。

5) React Native 中运行多少个线程?

React Native 应用程序包含以下线程:

  • React Native UI 线程(主线程): 此线程用于移动应用程序的布局。
  • React Native JavaScript 线程: 这是我们的业务逻辑运行的线程。这意味着 JS 线程是我们 JavaScript 代码执行的地方。
  • React Native 模块线程: 有时,我们的应用程序需要访问平台 API,这作为原生模块线程的一部分发生。
  • React Native 渲染线程: 此线程用于生成用于绘制应用程序 UI 的实际 OpenGL 命令。

6) 什么是 React Native 应用?

React Native 应用程序不是 Web 应用程序。这类应用程序运行在移动设备上,无法通过浏览器加载。此外,它们也不是混合应用程序,不像 Ionic、Phonegap 等构建的应用程序那样可以在 WebView 组件中运行。它们是使用单一语言 JavaScript 和原生组件构建的真实原生应用程序,可在移动设备上运行。


7) 列出创建和启动 React Native App 的步骤?

创建和启动 React Native 应用程序需要以下步骤:

步骤-1: 安装 Node.js

步骤-2: 使用以下命令安装 react-native 环境。

步骤-3: 使用以下命令创建项目。

步骤-4: 接下来,使用以下命令进入项目目录。

步骤-5: 现在,运行以下命令启动项目。

要阅读更多信息,请点击此处


8) React Native 中的状态是什么?

它用于控制组件。可变数据可以存储在状态中。它是可变的,意味着状态可以随时更改值。

示例

在这里,我们将创建一个带有状态数据的 Text 组件。Text 组件的内容将在我们每次点击它时更新。事件 onPress 调用 setState 函数,该函数将状态更新为“myState”文本。

要阅读更多信息,请点击此处


9) React Native 中的 props 是什么?

React Native 组件的属性被称为 props。它们用于将数据传递给不同的组件。在 React Native 中,许多组件在创建时通过不同的参数进行定制,这些参数被称为 props。它是不可变的,这意味着 props 不能改变值。它提供了容器组件和展示组件之间的连接。

示例

在这里,我们创建了一个 Heading 组件,带有一个消息 prop。父类 App 将 prop 发送给子组件 Heading。

要阅读更多信息,请点击此处


10) 列出 React Native 的用户?

如今,市场上有数千个 React Native 内置应用程序。以下是使用 React Native 应用程序的用户列表:

  • Facebook
  • Facebook 广告管理器
  • Instagram
  • F8
  • Airbnb
  • Skype
  • Tesla
  • Bloomberg
  • Gyroscope
  • Myntra
  • UberEats

11) 所有 React 组件都可以在 React Native 中使用吗?

React Web 组件使用 DOM 元素(例如 div、h1、table 等)在 UI 上显示。但是,这些组件在 React Native 中不受支持。您需要找到专门为 React Native 制作的库或组件。很难找到同时支持这两种平台的组件。但是,应该很容易弄清楚给定的组件是为 React Native 制作的还是不适合。因此,这清楚地表明并非所有组件都可以在 React Native 中使用。


12) 虚拟 DOM 在 React Native 中如何工作?

虚拟 DOM 是一个轻量级的 JavaScript 对象,它是真实 DOM 的内存表示。它是调用渲染函数和在屏幕上显示元素之间的中间步骤。它类似于一个节点树,其中列出了元素、它们的属性和内容作为对象及其属性。渲染函数创建 React 组件的节点树,然后响应用户或系统进行的各种操作导致的数据模型中的突变来更新此节点树。

虚拟 DOM 分三步工作:

  • 每当 React App 中的任何数据发生变化时,整个 UI 都会在虚拟 DOM 表示中重新渲染。
  • 现在,计算上一个 DOM 表示和新 DOM 之间的差异。
  • 计算完成后,真实的 DOM 只会更新那些已更改的内容。

13) 我们可以在 React Native 中结合原生的 iOS 或 Android 代码吗?

是的,我们可以将原生的 iOS 或 Android 代码与 React Native 结合起来。它可以结合用 Objective-C、Java 和 Swift 编写的组件。


14) Android 和 iOS 使用相同的代码库吗?

是的,我们可以为 Android 和 iOS 使用相同的代码库,React 会处理所有原生组件的转换。例如,React Native 的 ScrollView 在 Android 上使用 ScrollView,在 iOS 上使用 UiScrollView。


15) React Native 中 Element 和 Component 有什么区别?

React Native 中 Element 和 Component 的区别是:

React ElementReact Component
React Element 是一个简单的对象,它描述一个 DOM 节点及其属性。它是一个不可变对象,不能对其应用任何方法。React Component 是一个函数或类,它接受输入并返回一个 React 元素。它包含对其 DOM 节点和子组件实例的引用。
例如
<button className = "green"></button>
例如
const SignIn = () => (
  <div>
   <p>Sign In</p>
   <button>Continue</button>
   <button color='green'>Cancel</button>
  </div>
);

16) React 和 React Native 有什么区别?

React 和 React Native 之间的主要区别在于:

  • React 是一个 JavaScript 库,而 React Native 是一个基于 React 的 JavaScript 框架。
  • 两个平台中使用标签的方式不同。
  • React 用于开发 UI 和 Web 应用程序,而 React Native 可用于创建跨平台移动应用程序。

要阅读更多信息,请点击此处


17) React Native 和 Ionic 有什么区别?

React Native 和 Ionic 的主要区别在于:

  • Ionic 是一种典型的混合开发框架。它主要关注前端用户体验或 UI 交互,处理应用程序的所有外观。它易于学习,并且可以与其他库或框架(如 Angular、React、Cordova 等)集成。它的目的是一次编写,随处运行。
  • React Native 是一个由 Facebook 开发的开源 JavaScript 框架,用于构建跨平台移动应用程序。它用于为 iOS、Android 和 Windows 开发移动应用程序。React Native 与 React 相同,但它使用原生组件而不是 Web 组件作为构建块。它针对的是移动平台而不是浏览器。它的目的是一次学习,随处编写。

要阅读更多信息,请点击此处


18) React Native 和 Native(Android 和 iOS)有什么区别?

React Native 允许您一次编写,随处运行。这意味着我们可以在 Android 和 iOS 平台上重用 React Native 代码。虽然我们可以在两个平台之间重用大部分 React Native 代码,但 Android 和 iOS 是不同的系统。在这里,我们将看到这些差异。

操作系统

您可以使用 React Native 为 Android 和 iOS 构建应用程序,但如果您在 Windows 系统上工作,检查应用程序是否在两个系统上运行并非易事。Windows 不允许运行 XCode 及其模拟器(一个 macOS 应用程序)。还有其他工具可用,但它们不是官方的。

原生元素

元素对 React Native 和原生应用程序执行不同的操作。React Native 应用程序使用 React Native 库中的元素,而原生应用程序不使用 React Native 库的元素。

特定样式-阴影

阴影样式是 iOS 和 Android 在开发跨平台应用程序时的重要区别。Android 不支持阴影;相反,它使用 elevation 属性。

链接库

有时我们想在我们的应用程序中使用第三方库。大多数情况下,我们将其添加为依赖项,但有时它需要手动链接才能添加库。手动链接库对于开发人员来说并非易事,无论是 Web 应用程序还是原生应用程序。由于 React Native 处于改进阶段,库文档未根据最新框架进行更新。

React Native vs. Native (Android 和 iOS)

 React NativeAndroidiOS
语言JavaScript JSXJavaObjective-C/Swift
调试器文本编辑器、Chrome 调试器Android StudioXCode
使用者Facebook, AirBnBAirdroid, ChromerGarageBand, iMovie

19) React Native 和 Xamarin 有什么区别?

React Native 和 Ionic 的主要区别在于:

  • React Native 是一个由 Facebook 开发的开源 JavaScript 框架,用于为 iOS、Android 和 Windows 构建跨平台移动应用程序。React Native 与 React 相同,但它使用原生组件而不是 Web 组件作为构建块。它针对的是移动平台而不是浏览器。它的目的是一次学习,随处编写。
  • Xamarin 是一个开源的跨平台开发框架,它允许您使用 C# 语言构建 Android、iOS、Windows 和 Mac 应用程序。它于 2011 年 5 月由 Xamarin 公司首次推出。2016 年,微软签署了收购 Xamarin 的协议。

要阅读更多信息,请点击此处


20) StyleSheet.create 的作用是什么?

在 React Native 中,StyleSheet.create() 确保值是不可变和不透明的。它们用于通过桥接器只发送一次样式,以避免传递新的样式对象。


21) XHR 模块在 React Native 中用于什么?

在 React Native 中,XHR 模块用于实现 XMLHttpRequest。它是一个用于与远程服务交互的对象。该对象由两部分组成:前端和后端,其中前端允许在 JavaScript 中进行交互。它将请求发送到 XHR 后端,后者负责处理网络请求。后端部分称为 Networking。


22) React Native 是原生移动应用吗?

是的,React Native 是一个原生移动应用程序,它使用原生应用程序组件编译原生移动应用程序。它既不是使用 WebView 运行 HTML5 应用程序的混合移动应用程序,也不是移动 Web 应用程序。React Native 框架构建了一个真实的移动应用程序,与使用 Objective-C/Swift 或 Java 构建的应用程序无法区分。


23) React Native 使用什么语言?

React Native 中使用的语言是 Android 应用程序的 Java 和 iOS 应用程序的 Objective-C/Swift。


24) React Native 中的 style 是什么?

它是 Web 或移动端中必不可少的组件,使应用程序具有吸引力。React Native 不需要任何特殊的语言或语法进行样式设置。它可以使用 JavaScript 对象来样式化应用程序。

要阅读更多信息,请点击此处


25) React Native 中的 Refs 是什么?

React refs 是一些有用的功能,允许你直接在 React 中访问 DOM 元素或组件实例。当你想要更改组件的子元素而不使用 props 或重新渲染整个组件时,它会派上用场。

要阅读更多信息,请点击此处


26) 为什么 React Native 应用程序使用 keys?

Keys 是唯一的标识符。它们用于标识列表中哪些项已更改、更新或删除。它应该始终在数组内部使用。

要阅读更多信息,请点击此处


27) React Native 中 HOC 是什么意思?

HOC 代表高阶组件。它是一种允许您重用组件逻辑的技术。它是一个接受组件并返回新组件的函数。

语法


28) InteractionManager 是什么意思,为什么它很重要?

InteractionManager 是 React Native 中的一个原生模块,它负责推迟函数的执行,直到交互完成。要处理这种推迟,我们需要调用 InteractionManager.runAfterInteractions(() => {...})

InteractionManager 之所以重要,是因为 React Native 有两个线程。一个是 JavaScript UI 线程,它处理屏幕上的绘图更新;第二个线程用于处理所有非 UI 线程的任务。由于 React Native 只有一个线程用于进行 UI 更新,它可能会过载并掉帧,尤其是在导航屏幕动画中。因此,开发人员使用 InteractionManager 来确保在这些动画发生后执行函数。结果,我们不会在 UI 线程上掉帧。


29) Class 和 Functional Component 有什么区别?

类组件和函数式组件之间的主要区别是:

语法: 两种组件的声明方式不同。函数式组件接受 props 并返回 React 元素,而类组件需要继承自 React。

状态: 类组件有状态,而函数式组件是无状态的。

生命周期: 类组件有生命周期,而函数式组件没有生命周期。


30) 什么时候会更喜欢类组件而不是函数式组件?

当组件具有状态和生命周期时,我们更喜欢类组件;否则,应使用函数式组件。


31) React Native 如何处理不同的屏幕尺寸?

React Native 提供了多种处理屏幕尺寸的方法。其中一些如下:

1. Flexbox: 它用于在不同屏幕尺寸上提供一致的布局。它有三个主要属性:

  • flexDirection
  • justifyContent
  • alignItems

2. 像素比: 它用于通过使用 PixelRatio 类访问设备像素密度。如果我们在高像素密度设备上,我们将获得更高分辨率的图像。

3. 尺寸: 它用于处理不同的屏幕尺寸并精确地样式化页面。它只需要编写一次代码即可在任何设备上运行。

4. 纵横比: 它用于设置高度或反之。纵横比仅存在于 React-Native 中,而不是 CSS 标准。

5. ScrollView: 它是一个滚动容器,包含多个组件和视图。可滚动项可以垂直和水平滚动。


32) 什么是 ListView?

ListView 是 React Native 的核心组件,它包含项目列表并以垂直滚动列表的形式显示。

要阅读更多信息,请点击此处


33) React Native 最好的 UI 组件有哪些?

React Native 最好的 UI 组件是:

  • Material UI
  • Semantic UI
  • React Bootstrap
  • React Toolbox
  • Ant Design

34) React 和 React Native 有哪些相似之处?

React 和 React Native 之间最常见的相似之处是:

  • React 生命周期方法
  • React 组件
  • React States 和 Props
  • Redux Libraries

35) React Native 中的动画是什么?

动画是一种通过操纵图像使其看起来像移动物体的方法。React Native 动画允许您添加额外的效果,从而在应用程序中提供出色的用户体验。我们可以将它与 React Native API、Animated.parallel、Animated.decay 和 Animated.stagger 一起使用。

React Native 有两种类型的动画,如下所示。

  • Animated: 此 API 用于控制特定值。它具有用于控制基于时间的动画执行的开始和停止方法。
  • LayoutAnimated: 此 API 用于动画化全局布局事务。

要阅读更多信息,请点击此处


36) React Native 如何在服务器上加载数据?

React Native 使用 Fetch API 获取网络需求所需的数据。


37) React Native 中的存储系统是什么?

React Native 存储是一个简单、未加密、异步、持久的系统,它在应用程序中全局存储数据。它以键值对的形式存储数据。React Native 提供了 AsyncStorage 类来全局存储数据。使用 AsyncStorage 类,我们需要一个数据备份和同步类。这是因为设备上保存的数据不是永久的且未加密。

要阅读更多信息,请点击此处


38) 你能通过 React Native 在现有应用中集成更多功能吗?

是的,我们可以在 React Native 中向现有应用程序添加新功能。


39) Gesture Responder System 是什么意思?

它是 React Native 的内部系统,负责管理系统中手势的生命周期。React Native 为用户提供了几种不同类型的手势,例如轻触、滑动、轻扫和缩放。响应器系统协商这些触摸交互。通常,它与 Animated API 一起使用。此外,建议它们永远不要创建不可逆转的手势。


40) React Native Packager 在 React Native 中有什么作用?

React Native Packager 执行以下功能:

  • React Native 打包器将您的应用程序的所有 JavaScript 代码组合到一个文件中,然后翻译设备无法理解的任何 JavaScript 代码,例如 JSX。
  • 它还将项目中使用的资产(例如 PNG 文件)转换为可由 Image 组件显示的对象。

41) 为什么 React Native 使用 Redux?

Redux 是 JavaScript 应用程序的状态容器。它是一个状态管理工具,可帮助您编写行为一致、可在不同环境中运行且易于测试的应用程序。

React Native 使用 Redux 是因为它允许开发人员将一个应用程序状态用作全局状态,并轻松地从任何 React 组件与该状态进行交互。它可以与任何框架或库结合使用。


42) 如何将 React Native 更新到最新版本?

将现有 React Native 升级到最新版本非常重要,这可以让您访问更多 API、视图、开发人员工具和其他最新功能。升级 React Native 到最新版本需要执行以下步骤。

1. 在 package.json 中将您的 expo 项目升级到最新版本的 react-native、react 和 expo 包。

2. 在 app.json 文件中设置与最新 react-native 兼容的最新 SDK 版本。

3. 使用以下命令升级 React Native CLI 以更新源文件。

4. 安装升级助手 Web 工具,该工具可帮助您在任意两个版本之间升级应用程序。

5. 运行以下命令升级您的项目文件。

6. 最后,您需要执行故障排除活动以使用 React Native CLI 进行升级。


43) React Native 中的 API 是什么?

API 或应用程序编程接口是一种软件中介,允许两个应用程序相互通信,而无需了解它们的实现方式。有时它被认为是一种契约,其文档代表了双方之间的协议。例如,每次您在手机上使用应用程序(如 Facebook)时,它都会发送一条消息,或者当您在手机上查看天气时,这些都是 API 的使用。

React Native 使用 Fetch 网络 API 来满足我们的需求。它只需通过 Fetch 调用 URL,然后根据需要向服务器发出请求。React Native API 主要使用三个生命周期方法,分别是 constructor、componentDidMount 和 Render。


44) 如何在 React Native 中使用 Axios?

Axios 是一个流行的库,用于从浏览器发出 HTTP 请求。它允许我们从浏览器发出 GET、POST、PUT 和 DELETE 请求。因此,React Native 使用 Axios 向 API 发出请求,从 API 返回数据,然后在我们的 React Native 应用程序中对该数据执行操作。我们可以通过使用以下命令将 Axios 插件添加到我们的项目中来使用 Axios。

Axios 具有以下几个功能:

  • 它从浏览器发出 XMLHttpRequests。
  • 它从 React Native 框架发出 Http 请求。
  • 它支持大多数 React Native API。
  • 它提供了一个客户端功能,可以保护应用程序免受 XSRF 攻击。
  • 它会自动转换浏览器中的响应和请求数据。

45) 哪个数据库最适合 React Native?

最受欢迎的 React Native 数据库是 SQLite 数据库。


46) 如何在 React Native 中使用 firebase?

Firebase 是一个流行的移动和 Web 应用开发平台工具。它提供了许多服务,帮助您构建快速高质量的应用程序,扩大用户群,并在无需管理基础设施的情况下赚取更多收益。它是一个功能强大的数据库即服务(DBaaS)工具,提供可扩展的云数据库,用于存储和同步客户端和服务器端开发的数据。Firebase 的一些主要功能包括身份验证、实时数据库、云消息传递、崩溃报告和分析。Firebase 是一种免费增值模式,而不是开源模式。但是,您可以在不超过其免费层限制的情况下免费使用其服务。

我们可以通过以下步骤开始使用 firebase:

  • 首先,登录 firebase 控制台,然后创建一个项目。
  • 从控制台检索 apikey、authDomian、DatabaseURL 和存储桶。
  • 接下来,您需要创建一个新的 React Native 项目
  • 从 npm 安装 firebase 插件
  • 将 firebase 插件添加到 React Native 项目中