React Native面试题2025——布局与样式(2)

一 概述

1. 在 React Native 中，如何实现响应式布局？如何适配不同屏幕尺寸？
2. React Native 中的 Flexbox 是如何工作的？它与传统的 CSS Flexbox 有何不同？
3. 在 React Native 中，如何优化渲染性能？比如，如何避免不必要的重渲染？
4. 如何在 React Native 中使用原生 UI 组件（如原生导航、原生模块等）？

二 面试题解答(仅供参考)

2.1 在 React Native 中，如何实现响应式布局？如何适配不同屏幕尺寸？

在 React Native 中，响应式布局 通常通过使用 Flexbox 布局系统和 百分比、动态计算来实现。

具体方法如下：

一、使用 Flexbox 布局：
React Native 默认使用 Flexbox 来布局组件，能够实现动态的适配。
通过设置 flexDirection、alignItems、justifyContent 等属性，
可以灵活地调整布局，适配不同的屏幕尺寸和方向。

二、使用百分比和动态尺寸：

-可以使用百分比（例如 width: '50%'）来设置组件的宽度和高度，从而实现根据父容器的尺寸自动调整。
-使用 Dimensions API 获取屏幕的宽度和高度，通过动态计算来设置组件的尺寸，
例如：const { width, height } = Dimensions.get('window');。

三、媒体查询（Media Query）和 Platform 模块：
-React Native 提供了 Platform 模块，开发者可以根据平台类型（iOS 或 Android）设置不同的布局或样式。
-还可以通过第三方库（如 react-native-responsive-dimensions）来实现更精细的屏幕尺寸适配。

通过这些方法，React Native 应用可以适配不同屏幕尺寸，确保布局在不同设备上都有良好的展示效果。

2.2 React Native 中的 Flexbox 是如何工作的？它与传统的 CSS Flexbox 有何不同？

React Native 中的 Flexbox 布局与传统的 CSS Flexbox 类似，用于创建灵活和响应式的布局。
它通过设置容器和子元素的 flexDirection、justifyContent、alignItems 等属性来控制布局。

一、Flexbox 工作原理：
-flexDirection：定义主轴方向，默认为 column（垂直方向），可以设置为 row（水平方向）。
-justifyContent：控制主轴方向上的对齐方式（如 flex-start、center、space-between 等）。
-alignItems：控制交叉轴方向上的对齐方式（如 flex-start、center、stretch 等）。
-flex：用来定义子元素在父容器中占用的比例，值越大占的空间越多。

二、与传统 CSS Flexbox 的区别：
2.1 默认方向不同：
React Native 默认的 flexDirection 是 column（垂直方向），而传统的 CSS 默认是 row（水平方向）。

2.2 样式书写方式不同：
React Native 样式是通过 JavaScript 对象定义的，没有传统的 CSS 语法，因此没有支持像 :hover 等伪类。

2.3 不支持某些 CSS 特性：
React Native 的 Flexbox 不完全支持 CSS Flexbox 的所有特性，
如 flex-wrap 和 order，不过常用的布局功能已经覆盖。

总体来说，React Native 的 Flexbox 与 CSS Flexbox 在布局逻辑上非常相似，
但在实现上有些差异，主要体现在默认方向和支持的属性上。

2.3 在 React Native 中，如何优化渲染性能？比如，如何避免不必要的重渲染？

在 React Native 中，优化渲染性能的关键是减少不必要的重渲染。
以下是一些常用的优化方法：

一、使用 shouldComponentUpdate / React.memo：
-对于类组件，可以重写 shouldComponentUpdate 方法，控制组件是否需要重新渲染。
-对于函数组件，可以使用 React.memo，它会对组件的 props 进行浅比较，如果 props 没有变化，就跳过重新渲染。

二、使用 useMemo 和 useCallback：
-useMemo 用于缓存计算结果，避免在每次渲染时进行重复计算。
-useCallback 用于缓存函数，避免每次渲染时重新创建函数引用，减少不必要的重新渲染。

三、避免在 render 中创建新对象或数组：
在 render 函数中创建新的对象或数组会导致每次渲染时都生成新的引用，进而触发子组件的重新渲染。
可以将这些对象或数组移到外部，或使用 useMemo 缓存。

四、优化列表渲染：
-使用 FlatList 或 SectionList 来渲染大量数据，开启 虚拟化（只渲染可视区域的项），提高性能。
-设置 keyExtractor 和 getItemLayout 来优化列表的渲染。

五、避免不必要的状态更新：
-确保只有在状态实际变化时才更新状态，避免频繁的状态更新导致重复渲染。

六、使用合适的组件更新粒度：
-将大组件拆分成小组件，确保每个小组件只在需要时才更新，避免全局渲染。

通过这些方法，可以显著减少 React Native 中的性能瓶颈，确保应用在低性能设备上也能流畅运行。

2.4 如何在 React Native 中使用原生 UI 组件（如原生导航、原生模块等）？

在 React Native 中，使用原生 UI 组件（如原生导航、原生模块等）通常通过 桥接（Bridge） 机制来实现，
步骤如下：

一、使用原生导航：
-React Native 提供了 React Navigation 和 React Native Navigation 两种导航方案。
-React Native Navigation 通过原生导航库实现，提供了更接近原生体验的导航。
安装并配置该库后，可以使用原生的堆栈导航、标签导航等。

二、调用原生模块：
2.1 React Native 允许通过 Native Modules 来调用原生代码
（如 Java、Kotlin、Objective-C 或 Swift）提供的功能。

2.2 首先，需要在原生平台中创建一个模块，将功能暴露给 JavaScript 层。
然后，在 JavaScript 中通过 NativeModules 来调用这些原生功能。

2.3 示例：调用 Android 的原生 Toast：
import { NativeModules } from 'react-native';
NativeModules.ToastExample.show('Hello, World!', ToastExample.LONG);

三、创建自定义原生组件：
-如果需要使用自定义原生 UI 组件，可以通过创建一个原生模块并将其作为 React Native 组件进行桥接。
-需要在原生代码中创建组件，然后通过桥接暴露给 JavaScript，使其可以像普通 React Native 组件一样使用。

四、第三方原生库：
还可以通过使用第三方库来集成常见的原生 UI 组件，
如 react-native-camera、react-native-maps 等，这些库封装了原生代码并提供了 JavaScript API。

通过这些方式，React Native 可以灵活地与原生平台进行交互，调用原生 UI 组件和功能