React Native面试题——面试题整理3

一 面试题汇总

  1. 你如何安装和创建React Native应用程序?
  2. 你如何调试React应用程序,你可以使用哪些工具?
  3. 构建一个除了说 "Hello World!"什么都不做的React应用
  4. 你能在同一个代码库中为Android和iOS编写代码吗?
  5. 描述一下如何重新呈现FlatList。
  6. 你如何在React Native中为一个组件设计样式?
  7. 如何在React Native中调用一个Web API?
  8. 描述一下虚拟DOM是如何工作的。
  9. 描述Flexbox以及它最常用的属性
  10. 如何从React Native的本地JSON文件中获取数据?

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

2.1 你如何安装和创建React Native应用程序?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
1.安装 Node.js 和 npm
首先,确保你的系统中安装了 Node.js 和 npm(Node.js 包管理器)。
可以通过以下命令检查是否已安装(如果没有安装,可以去Node.js官网下载并安装最新版本。):
node -v
npm -v

2.安装 React Native CLI 或 Expo CLI
有两种主要的方式来创建 React Native 应用程序:
通过 React Native CLI 或 Expo CLI。
这两者的区别在于,
React Native CLI 更适合需要本地代码编写的项目,
而 Expo CLI 更适合快速开始,并且无需自己配置原生代码。

2.1 使用 React Native CLI:
React Native CLI 提供了一个更原生的开发体验,适合需要更高级自定义的项目。

2.1.1 通过 npm 安装 React Native CLI
npm install -g react-native-cli

2.1.2 创建一个新的 React Native 项目:
npx react-native init MyApp
这将创建一个名为 MyApp 的新项目文件夹,并初始化所需的项目结构。

2.1.3 进入项目目录
cd MyApp

2.1.4 启动应用程序:
-对于 iOS(需要 macOS 和 Xcode)
npx react-native run-ios
-对于 Android(需要 Android Studio 和设备模拟器):
npx react-native run-android

2.2 使用 Expo CLI
Expo 是一个更简单的 React Native 开发框架,它提供了很多开箱即用的功能,适合快速开发和调试。
2.2.1 安装 Expo CLI
npm install -g expo-cli
2.2.2 创建一个新的 Expo 项目(选择一个模板(例如:blank 或 tabs))
expo init MyApp
2.2.3 进入项目目录
cd MyApp
2.2.4 启动项目启动项目
expo start
这会打开一个开发服务器,你可以通过 Expo Go 应用程序在手机上扫描二维码来运行应用。

3. 安装 Android Studio 和 Xcode(可选)
-如果你要在 Android 上开发,需要安装 Android Studio,并设置好 Android 模拟器。
-如果你要在 iOS 上开发(仅适用于 macOS),需要安装 Xcode,并确保你设置了 Xcode 开发环境。


4.使用 Visual Studio Code 进行开发(推荐)
你可以使用任何你喜欢的代码编辑器,但 Visual Studio Code 是最常用的开发环境之一,
支持很多 React Native 插件和扩展。
可以从 VSCode 官网 下载并安装。

5.总结
-安装 Node.js 和 npm。
-选择适合你的工具:
--React Native CLI:适合需要原生代码的项目。
--Expo CLI:适合快速开发和不需要复杂原生代码的项目。
-使用命令行创建项目并启动开发服务器。
-配置 Android Studio 或 Xcode,以便进行 iOS 或 Android 开发。

这样你就可以顺利创建并启动你的第一个 React Native 应用程序

2.2 你如何调试React应用程序,你可以使用哪些工具?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
调试是开发过程中非常重要的一部分,React Native 提供了多种工具和技术来帮助你调试应用程序。
以下是一些常用的调试工具和方法:

1.使用 React Native 调试工具
1.1 开发者菜单(Developer Menu)
在模拟器或设备上,你可以通过摇动设备或使用快捷键打开开发者菜单:
-iOS:按下 Cmd + D(模拟器),或摇动设备。
-Android:按下 Cmd + M(模拟器)或摇动设备。

开发者菜单提供了以下功能
-启用热重载(Hot Reload):在代码修改后自动重新加载应用。
-启用远程调试(Remote Debugging):通过 Chrome 浏览器调试 JavaScript。
-查看日志:查看应用的日志输出。
-模拟性能:模拟不同的性能状态,例如内存、CPU 使用率等。

1.2 远程调试(Remote Debugging)
-远程调试是通过浏览器调试 JavaScript 代码的一种方式。你可以在开发者菜单中启用它。
-选择 Enable Remote Debugging 后,React Native 会在 Chrome 中启动一个调试窗口。
你可以在浏览器的开发者工具中查看 console 输出、设置断点、查看网络请求等。

步骤:
-在开发者菜单中选择 Enable Remote Debugging。
-打开 Chrome 浏览器并进入 chrome://inspect。
-点击 Inspect,就可以看到应用的调试信息,并在浏览器控制台中调试。

1.3 控制台日志(Console Logs)
-使用 console.log() 可以在开发过程中查看变量的值和应用状态。React Native会在控制台输出日志信息。
-对于 Android,可以通过adb logcat命令查看日志:adb logcat
-对于 iOS,可以通过 Xcode 查看控制台日志。

2.React DevTools
2.1 安装 React DevTools
React DevTools 是一个用于调试 React 组件的工具,适用于 React Native 应用。
它可以帮助你查看组件的状态、属性和更新等。

步骤:
-安装 React DevTools:npm install -g react-devtools
-在项目根目录运行:react-devtools

React DevTools 会在浏览器中启动,并连接到你的 React Native 应用。
你可以查看组件树、组件的 props 和 state,以及对组件进行交互调试。


3.Flipper
3.1 使用 Flipper
Flipper 是一个强大的调试工具,专门为 React Native 开发设计。
它可以帮助你进行性能分析、网络调试、查看日志等。

步骤:
-Flipper 默认集成在 React Native 中。
你只需要在项目中安装 react-native-flipper,并在 AppDelegate.m(iOS)或 MainApplication.java(Android)中进行配置。
-启动 Flipper 应用,并与 React Native 项目连接。
-在 Flipper 中,你可以查看日志、网络请求、数据库、UI 渲染等内容

4.使用断点调试(Breakpoints)
你可以在代码中设置断点来暂停执行并查看变量的值。
这可以帮助你找到应用中的问题,尤其是在复杂的逻辑中。

步骤:
-在 VS Code 或 WebStorm 中设置断点。
-启用远程调试并连接到浏览器调试工具。
-设置断点后,你可以单步执行代码,查看应用状态,帮助你更好地理解代码的执行流程。

5.性能调试: 使用 React Native 性能工具
React Native 提供了工具来分析和优化性能。
例如,你可以在开发者菜单中启用 Performance Monitor 来查看应用的 CPU 和内存使用情况。

步骤:
-打开开发者菜单并选择 Show Perf Monitor。
-这会显示 CPU 和内存的实时图表,帮助你识别性能瓶颈。

6.第三方调试工具
-Redux DevTools:
如果你在React Native应用中使用Redux来管理状态,Redux DevTools可以帮助你调试和查看Redux的状态和动作。
-Why Did You Render:用于优化 React 组件的重新渲染,帮助你查看不必要的渲染和性能瓶颈。


7. 总结
调试 React Native 应用程序时,你可以使用以下工具和技术:

-开发者菜单:快速启用热重载和远程调试。
-远程调试:通过 Chrome 浏览器调试 JavaScript 代码。
-console.log():查看输出日志。
-React DevTools:调试 React 组件的状态和属性。
-Flipper:进行综合性能分析和调试。
-断点调试:在代码中设置断点,单步执行并查看状态。
-性能监控:通过性能监控工具检查应用的 CPU 和内存使用情况。

这些工具和方法可以帮助你快速定位和解决应用中的问题,提高开发效率

2.3 构建一个除了说 "Hello World!"什么都不做的React应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
1.安装 React Native CLI
首先,确保你已经安装了 React Native CLI。如果你没有安装,可以通过 npm 安装:
npm install -g react-native-cli

2.初始化项目:使用 React Native CLI 创建一个新的项目:
npx react-native init HelloWorldApp
这将在名为 HelloWorldApp 的目录中创建一个新的 React Native 项目。

3.进入项目目录:进入新创建的项目文件夹:
cd HelloWorldApp

4.修改 App.js
在 HelloWorldApp 项目中,打开 App.js 文件。
默认的内容可能包含一些示例代码,我们将其替换为简单的“Hello World!”。

修改后的代码如下:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello World!</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
text: {
fontSize: 24,
color: 'black',
},
});

export default App;

View 是一个容器组件,用来包含其他组件。
Text 用来显示文本,这里我们显示的是 "Hello World!"。
StyleSheet.create 用来创建样式对象

5. 运行应用
现在,你已经完成了应用的修改,接下来在模拟器或设备上运行应用
5.1 对于 iOS(需要 macOS 和 Xcode):
npx react-native run-ios
5.2 对于 Android(需要 Android Studio 和设备模拟器):
npx react-native run-android

6.总结
你已经创建了一个非常简单的 React Native 应用,它只会显示 "Hello World!"。
以下是关键步骤:

-使用 React Native CLI 创建新项目。
-修改 App.js 文件,显示 "Hello World!"。
-在模拟器或设备上运行应用。

这个简单的应用展示了如何构建一个基础的 React Native 应用,并渲染一些文本

2.4 你能在同一个代码库中为Android和iOS编写代码吗?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
是的,React Native 允许你在同一个代码库中为 Android 和 iOS 编写代码。
React Native 的跨平台特性使得大部分代码可以共享,但也提供了机制来处理平台特定的需求。

以下是如何在同一代码库中为不同平台编写代码的几种方式:

1. 平台特定的文件扩展名
React Native 支持平台特定的代码文件。
你可以通过在文件名中添加平台后缀来实现平台特定的代码。

-iOS 文件后缀是 .ios.js
-Android 文件后缀是 .android.js

例如,假设你有一个组件,它在 Android 和 iOS 上的实现略有不同,你可以创建两个不同的文件:
-MyComponent.ios.js
-MyComponent.android.js
React Native 会自动根据平台加载对应的文件。

2.使用 Platform 模块

React Native 提供了一个 Platform 模块,用于检测当前运行的操作系统,从而实现平台特定的代码逻辑。

import { Platform, Text } from 'react-native';
const MyComponent = () => {
return (
<Text>
{Platform.OS === 'ios' ? '这是 iOS' : '这是 Android'}
</Text>
);
};

在这个例子中,Platform.OS 检查当前平台是 ios 还是 android,并根据平台渲染不同的内容。

3.条件渲染
你也可以根据平台进行条件渲染,在一个文件中使用不同的视图或样式:

import { Platform, View, Text, StyleSheet } from 'react-native';
const MyComponent = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>
{Platform.OS === 'ios' ? 'Hello iOS!' : 'Hello Android!'}
</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
text: {
fontSize: 24,
color: Platform.OS === 'ios' ? 'blue' : 'green', // 不同平台使用不同颜色
},
});

export default MyComponent;
通过使用 Platform.OS,你可以根据平台选择不同的样式、文本或组件行为。

4.使用原生模块
如果你需要访问特定于平台的原生功能(如摄像头、GPS、文件系统等),
你可以编写 原生模块,并在同一个代码库中为 Android 和 iOS 提供不同的实现

-iOS:可以在 ios/ 文件夹中编写原生 Objective-C 或 Swift 代码。
-Android:可以在 android/ 文件夹中编写 Java 或 Kotlin 代码。

然后,React Native 通过桥接机制将这些原生功能暴露给 JavaScript。

5.总结
是的,React Native 允许你在同一个代码库中为 Android 和 iOS 编写代码。
你可以通过以下方式来实现平台特定的代码:

-使用平台特定的文件扩展名,如 .ios.js 和 .android.js。
-使用 Platform 模块来检测当前平台,并根据平台执行不同的逻辑。
-条件渲染来根据平台显示不同的内容。
-编写原生模块为平台特定的功能提供支持。

通过这些方法,你可以在共享大部分代码的同时,针对每个平台进行必要的定制和优化。

2.5 描述一下如何重新呈现FlatList。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
在 React Native 中,FlatList 是一个高效的滚动列表组件,它用于渲染大量数据。
为了优化性能,FlatList 会在用户滚动时只渲染可见项,避免渲染整个列表。
虽然这种行为提升了性能,但有时我们可能需要重新呈现 FlatList,例如在数据更新时或特定情况下强制刷新列表。

重新呈现 FlatList 的常见方法

1.更新 data 属性
FlatList 会根据 data 属性来渲染列表内容。
当你更新 data 时,FlatList会重新渲染。你可以通过调用setState或更新父组件的状态来触发重新渲染。

import React, { useState } from 'react';
import { FlatList, Text, View, Button } from 'react-native';
const App = () => {
const [data, setData] = useState([1, 2, 3, 4, 5]);

const refreshList = () => {
setData([6, 7, 8, 9, 10]); // 更新 data 触发重新渲染
};

return (
<View style={{ flex: 1 }}>
<Button title="刷新列表" onPress={refreshList} />
<FlatList
data={data}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item) => item.toString()}
/>
</View>
);
};

export default App;

在这个例子中,当点击 刷新列表 按钮时,data 被更新,FlatList 会重新渲染显示的新数据。

2.使用 extraData 属性
extraData 用于告诉 FlatList 是否需要重新渲染。
如果你的列表项有外部状态或属性需要更新,但 data 本身没有改变,你可以使用 extraData 来触发重新渲染。

示例
import React, { useState } from 'react';
import { FlatList, Text, View, Button } from 'react-native';

const App = () => {
const [selectedItem, setSelectedItem] = useState(null);
const data = [1, 2, 3, 4, 5];

const selectItem = (item) => {
setSelectedItem(item); // 更新外部状态,触发 FlatList 重新渲染
};

return (
<View style={{ flex: 1 }}>
<FlatList
data={data}
renderItem={({ item }) => (
<Text
style={{
padding: 10,
backgroundColor: selectedItem === item ? 'yellow' : 'white',
}}
onPress={() => selectItem(item)}
>
{item}
</Text>
)}
keyExtractor={(item) => item.toString()}
extraData={selectedItem} // 使用 extraData 触发重新渲染
/>
</View>
);
};

export default App;
在这个例子中,extraData 被设置为 selectedItem,当选中一个项时,FlatList 会重新渲染更新后的列表。

3.调用 FlatList 的 scrollToIndex 或 scrollToOffset 方法
如果你希望强制 FlatList 重新渲染并滚动到某个位置,
可以使用 scrollToIndex 或 scrollToOffset 方法,这通常与列表更新结合使用。

示例
import React, { useRef, useState } from 'react';
import { FlatList, Text, Button, View } from 'react-native';

const App = () => {
const flatListRef = useRef(null);
const [data, setData] = useState([1, 2, 3, 4, 5]);

const refreshList = () => {
setData([6, 7, 8, 9, 10]); // 更新 data
flatListRef.current.scrollToIndex({ index: 0 }); // 滚动到顶部
};

return (
<View style={{ flex: 1 }}>
<Button title="刷新列表" onPress={refreshList} />
<FlatList
ref={flatListRef}
data={data}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item) => item.toString()}
/>
</View>
);
};

export default App;
当点击 刷新列表 按钮时,数据更新后,FlatList 会重新渲染并滚动到列表的顶部。

4.使用 keyExtractor 更新项的 key
每个 FlatList 项都需要一个唯一的 key 来标识。
通过改变 keyExtractor 返回的值,FlatList 可以强制重新渲染列表项。
例如,在更新数据时,确保每个项的 key 是唯一的,以便 React 能正确地标识和更新每个项。

5.总结
重新渲染 FlatList 可以通过以下几种方式实现:
-更新 data 属性,触发重新渲染。
-使用 extraData 属性来控制与数据无关的状态变化时重新渲染。
-调用 scrollToIndex 或 scrollToOffset 来滚动并强制重新渲染。
-更新项的 keyExtractor,确保每个项都有唯一的 key。

这些方法能够帮助你在 React Native 中控制 FlatList 的重新渲染,确保其响应数据变化。

2.6 你如何在React Native中为一个组件设计样式?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
在 React Native 中,样式的设计与在 Web 开发中使用 CSS 有一些不同。
React Native 使用 JavaScript 对象来定义样式,而不是直接使用 CSS 文件。
你可以使用 StyleSheet 来创建样式对象,并将这些样式应用到组件上。

以下是如何为一个组件设计样式的步骤:

1.使用 StyleSheet 来定义样式
React Native 提供了 StyleSheet API,它允许你创建一个样式对象,并且在应用时会优化性能。StyleSheet.create 用来声明样式,确保样式对象的不可变性。

示例
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const MyComponent = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
text: {
fontSize: 24,
color: 'blue',
},
});

export default MyComponent;
在这个示例中:
-styles.container设置了View 的样式,包括flex,justifyContent, alignItems和backgroundColor。
-styles.text 设置了 Text 组件的样式,包括字体大小和颜色。

2.通过内联样式应用样式
除了使用 StyleSheet,你还可以使用内联样式来直接定义组件的样式。
示例
import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' }}>
<Text style={{ fontSize: 24, color: 'blue' }}>Hello, React Native!</Text>
</View>
);
};

export default MyComponent;
这种方法适用于样式不复杂、只需简单设置的场景,但不建议用于大型项目,因为内联样式没有优化,且可读性较差。

3.样式的层叠与合并
你可以将多个样式组合在一起,甚至合并动态生成的样式。

示例
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const MyComponent = ({ isBlue }) => {
return (
<View style={styles.container}>
<Text style={[styles.text, isBlue && styles.blueText]}>Hello, React Native!</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
text: {
fontSize: 24,
},
blueText: {
color: 'blue',
},
});

export default MyComponent;
在这个示例中:
-styles.text 设置了通用样式。
-isBlue && styles.blueText 动态地根据 isBlue 属性来决定是否应用 blueText 样式。

4.使用平台特定样式
你可以为不同的平台(Android 和 iOS)设置不同的样式,通过使用 Platform 模块。

示例
import React from 'react';
import { View, Text, Platform, StyleSheet } from 'react-native';

const MyComponent = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
text: {
fontSize: 24,
color: Platform.OS === 'ios' ? 'blue' : 'green', // 在 iOS 上为蓝色,在 Android 上为绿色
},
});

export default MyComponent;
使用 Platform.OS 判断当前平台,并根据平台设置不同的样式。

5.使用第三方库
React Native 还支持一些第三方库来简化样式的创建和管理,比如 styled-components 或 native-base。

例如,使用 styled-components
npm install styled-components
import React from 'react';
import styled from 'styled-components/native';

const Container = styled.View`
flex: 1;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
`;

const TextStyled = styled.Text`
font-size: 24px;
color: blue;
`;

const MyComponent = () => {
return (
<Container>
<TextStyled>Hello, React Native!</TextStyled>
</Container>
);
};

export default MyComponent;

styled-components 让你能够使用类似于 CSS 的语法来定义样式,这对于许多开发者来说更加直观和方便。

6.总结
在 React Native 中设计组件样式时,通常有以下几种方法:
-使用 StyleSheet.create 定义样式并应用到组件上,这是最推荐的方式。
-使用内联样式,适用于简单样式的情况。
-合并多个样式,支持动态样式应用。
-使用 Platform 模块,为不同平台设置特定样式。
-使用第三方库(如 styled-components)来简化样式管理

2.7 如何在React Native中调用一个Web API?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
在 React Native 中,你可以使用 JavaScript 的 fetch API 或第三方库如 Axios 来调用 Web API。
下面将介绍如何使用这两种方法来进行 API 调用。

1.使用 fetch API
fetch 是 JavaScript 的内置方法,用于发送 HTTP 请求。
它返回一个 Promise,你可以通过 .then() 或 async/await 来处理响应数据。

示例:使用 fetch 调用 Web API
import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

const App = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetchData();
}, []);

const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data'); // 替换为你的 API URL
const result = await response.json();
setData(result); // 设置数据
} catch (err) {
setError(err.message); // 错误处理
} finally {
setLoading(false); // 请求完成后停止 loading
}
};

if (loading) {
return <ActivityIndicator size="large" color="#0000ff" />;
}

if (error) {
return <Text>Error: {error}</Text>;
}

return (
<View>
<Text>Data: {JSON.stringify(data)}</Text>
</View>
);
};

export default App;

在这个例子中:

-使用 fetch 调用 Web API (https://api.example.com/data)。
-response.json() 将响应数据解析为 JSON 格式。
-使用 useState 保存 API 返回的数据,loading 和 error 用于显示加载状态和错误信息。

2.使用 Axios 库
Axios 是一个基于 Promise 的 HTTP 客户端,可以用于浏览器和 Node.js。
与 fetch 相比,Axios 提供了一些额外的功能,如自动转换 JSON 数据、请求和响应拦截器等。

2.1 安装 Axios
npm install axios
2.2 示例:使用 Axios 调用 Web API
import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import axios from 'axios';

const App = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetchData();
}, []);

const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/data'); // 替换为你的 API URL
setData(response.data); // 设置数据
} catch (err) {
setError(err.message); // 错误处理
} finally {
setLoading(false); // 请求完成后停止 loading
}
};

if (loading) {
return <ActivityIndicator size="large" color="#0000ff" />;
}

if (error) {
return <Text>Error: {error}</Text>;
}

return (
<View>
<Text>Data: {JSON.stringify(data)}</Text>
</View>
);
};

export default App;
在这个例子中:

-使用 axios.get() 发送 GET 请求。
-response.data 存储了返回的 JSON 数据。
-同样使用 useState 管理数据、加载状态和错误信息。

3.总结
在 React Native 中,你可以使用:

-fetch API:内置的方式,简单而高效,适用于大多数 HTTP 请求。
-Axios:第三方库,提供更多功能,比如自动 JSON 解析、请求拦截器和更好的错误处理。

2.8 描述一下虚拟DOM是如何工作的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
虚拟 DOM(Virtual DOM)是 React 中的一项优化技术,用于提高 UI 更新的性能。
尽管 React Native 主要用于构建移动应用,但它仍然使用虚拟 DOM 来高效地处理组件的更新和渲染。

1. 什么是虚拟 DOM?
虚拟 DOM 是 React 使用的一种轻量级 JavaScript 对象,表示 UI 的结构,它是实际 DOM 的一个抽象表示。
虚拟 DOM 并不直接操作浏览器的实际 DOM,而是通过虚拟 DOM 来计算差异(称为“diffing”),
然后将变化应用到实际 DOM 上,从而减少了不必要的更新和提高性能。

2.虚拟 DOM 的工作原理:虚拟 DOM 的工作流程如下:

2.1初始渲染:
-当 React 应用首次渲染时,React 会创建一个虚拟 DOM 树,它反映了组件的 UI 结构。
-这个虚拟 DOM 树只是一个普通的 JavaScript 对象,它描述了 UI 的各个组件、元素及其属性。

2.2 状态更新:
-当应用的状态(如 state 或 props)发生变化时,React 会通过重新渲染组件来生成新的虚拟 DOM 树。
-这个新的虚拟 DOM 树反映了 UI 更新后的状态。

2.3 虚拟 DOM 对比:
-React 将新的虚拟 DOM 树与之前的虚拟 DOM 树进行对比,这个过程叫做 "diffing"。
-React 会比较两棵树之间的差异(即,哪些部分发生了变化)。

2.4 更新实际 DOM:
一旦找到了差异,React 会计算出最小的更新操作,
并将这些变化批量应用到实际的 DOM(在 React Native 中是原生组件的 UI)上。
这样,React 就只会更新那些实际需要改变的部分,而不是重绘整个 UI,极大地提高了性能。

3.虚拟 DOM 的优势
-性能优化:
虚拟 DOM 可以通过 diffing 算法找到最小的更新差异,从而避免直接操作实际 DOM 带来的性能开销。
它减少了 DOM 更新的次数,提高了渲染效率。

-跨平台:
React 和 React Native 都使用虚拟 DOM,使得同样的开发模式能够适用于 Web 和移动端,
提升了开发的效率和一致性。

-可预测的渲染:
由于虚拟 DOM 是纯粹的 JavaScript 对象,
它可以在内存中快速更新并进行差异计算,使得 React 组件的渲染变得更加可控和可预测。

4. 虚拟 DOM 与 React Native
在 React Native 中,虚拟 DOM 的概念仍然适用,
但与 Web 不同,React Native 会将最终的更新应用到原生组件上,而不是浏览器的实际 DOM。
虽然渲染方式不同,但虚拟 DOM 的核心原理是相同的,即通过对比前后状态的差异来优化更新。

5.总结
虚拟 DOM 是 React 的核心优化机制,它
通过在内存中进行 DOM 更新的模拟和差异计算,减少了不必要的实际 DOM 更新,从而提高了性能。
无论是在 React Web 还是 React Native 中,虚
拟 DOM 都能帮助提高 UI 渲染效率,使得应用在频繁更新和大规模数据变化时保持流畅。

2.9 描述Flexbox以及它最常用的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
简单描述:React Native面试题 描述Flexbox以及它最常用的属性 

1.Flexbox的定义
-Flexbox(弹性盒子布局)是一种CSS3布局模型,用于在容器中排列和分布项目。
-React Native采用了Flexbox布局,使得开发者可以使用一套统一的布局方式来构建跨平台的移动应用界面。

2.Flexbox的核心概念
-容器(Container):包含项目的父元素。
-项目(Items):容器中的子元素。
-主轴(Main Axis):项目排列的方向。
-交叉轴(Cross Axis):与主轴垂直的方向。

3.Flexbox的常用属性
3.1 flexDirection:
-定义主轴的方向。
-可选值:
--row(水平方向,从左到右)、
--column(垂直方向,从上到下)、
--row-reverse(水平方向,从右到左)、
--column-reverse(垂直方向,从下到上)。
-默认值:column。

3.2justifyContent:
-定义项目在主轴上的对齐方式。
-可选值:
--flex-start(起始位置对齐)、
--flex-end(结束位置对齐)、
--center(居中对齐)、
--space-between(项目之间均匀分布,首尾两端对齐)、
--space-around(项目之间均匀分布,首尾两端保留一半空间)、
--space-evenly(项目之间均匀分布,包括首尾两端)。

3.3 alignItems:
-定义项目在交叉轴上的对齐方式。
-可选值:
--flex-start(起始位置对齐)、
--flex-end(结束位置对齐)、
--center(居中对齐)、
--stretch(拉伸以填充容器)、
--baseline(基线对齐)。

3.4flex:
-定义项目的弹性系数,用于控制项目在容器中的伸缩比例。
-可以是数字,表示项目的伸缩比例。
-例如,flex: 1表示项目占据剩余空间,flex: 2表示项目占据剩余空间的两倍。

3.5alignSelf:
-定义单个项目在交叉轴上的对齐方式,覆盖alignItems的设置。
-可选值与alignItems相同。

3.6flexWrap:
-定义项目是否换行。
-可选值:nowrap(不换行)、wrap(换行)、wrap-reverse(反向换行)。

3.7alignContent:
-定义多行项目在交叉轴上的对齐方式,仅在flexWrap为wrap或wrap-reverse时生效。
-可选值与justifyContent相同。

4.Flexbox的应用场景
-创建响应式布局,适应不同屏幕尺寸。
-实现灵活的网格布局。
-控制项目在容器中的对齐和分布。
-构建复杂的UI界面。

5.关键要点
-Flexbox是一种强大的布局系统,用于创建灵活的布局。
-flexDirection定义主轴方向,justifyContent定义主轴对齐方式,alignItems定义交叉轴对齐方式。
-flex属性控制项目的伸缩比例,alignSelf属性覆盖单个项目的对齐方式。
-flexWrap属性控制项目是否换行,alignContent属性控制多行项目的对齐方式。

2.10 如何从React Native的本地JSON文件中获取数据?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
在 React Native 中,我们可以通过多种方式从本地的 JSON 文件中获取数据。
以下是几种常用的方法
1.将 JSON 文件放置在项目中
首先,你需要将 JSON 文件放置在项目的某个目录下,通常建议放在 assets 或 src 目录下。
假设我们有一个名为 data.json 的文件,存放在 assets 目录下

2. 通过 require 引入 JSON 文件
React Native 支持通过 require() 来加载本地的 JSON 文件。
你可以将 JSON 文件当作 JavaScript 对象直接导入。

示例:
假设你的项目结构如下:
project/
├── assets/
│ └── data.json
└── App.js

在 App.js 中,你可以使用 require() 来引入 JSON 文件并直接访问其内容
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
// 使用 require() 引入本地 JSON 文件
const data = require('./assets/data.json');

return (
<View style={styles.container}>
<Text>{data.title}</Text>
<Text>{data.description}</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

export default App;
在这个例子中,data.json 可能包含如下内容:
{
"title": "Hello React Native",
"description": "This is a simple example of loading local JSON data."
}
当你运行应用时,title 和 description 将会显示在屏幕上。

3.使用 fetch() 从本地文件读取 JSON(仅限模拟器)
如果你想在本地获取 JSON 数据,并且不想直接使用 require,你也可以使用 fetch() 函数,
但这只适用于模拟器,因为本地文件无法直接通过 fetch() 在真实设备上读取。

示例:
假设你的 data.json 文件在 assets 文件夹中,首先确保文件放在正确的路径,并在模拟器上通过 fetch() 来加载:
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
const [data, setData] = useState(null);

useEffect(() => {
// 使用 fetch() 加载本地 JSON 文件
fetch('./assets/data.json')
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.error(error));
}, []);

if (!data) {
return (
<View style={styles.container}>
<Text>Loading...</Text>
</View>
);
}

return (
<View style={styles.container}>
<Text>{data.title}</Text>
<Text>{data.description}</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

export default App;
这种方法使用 fetch() 来读取本地 JSON 文件,
但是需要注意,fetch() 读取本地文件时只适用于模拟器,不能在真实设备上直接读取本地文件。
对于真实设备,通常使用其他方式,如将 JSON 文件通过 API 加载或将数据打包成应用的一部分。

4.总结
-require() 是最常用且简单的方式,适用于直接引入本地 JSON 文件。
-fetch() 也可以用来加载本地 JSON 文件,但仅在模拟器中有效

三 参考

  • React Native 面试题整理