使用Expo开发RN应用

使用 Expo 来开发 React Native 应用程序是一个非常便捷的选择，特别是当你想快速开始移动应用开发时。Expo
为开发者提供了一系列的开发工具和 API，帮助你更快速地构建、测试和发布应用。以下是一些使用 Expo
开发应用的技巧和实用方法，帮助你更高效地进行开发。

1. 了解 Expo 的特点与限制

Expo 是一个 React Native 的开发框架，它提供了一整套开箱即用的功能，如相机、位置、通知等。但需要注意的是，Expo 的一些限制可能会影响你的开发决策：

优点：
- 快速开发：Expo 提供了大量的预配置和 API，减少了原生开发的复杂度。
- 跨平台支持：一套代码可以同时运行在 iOS 和 Android 上。
- Expo Go App：可以立即通过手机扫码运行应用，不需要复杂的配置。
- 内置 API 支持：如相机、加速计、推送通知、文件系统等功能开箱即用。
- OTA（Over the Air）更新：你可以通过 Expo 的 OTA 更新机制直接更新你的应用，无需重新发布应用商店。
限制：
- 自定义原生模块的限制：如果你需要使用原生的第三方库，可能需要将项目“eject”（弹出）为纯 React Native 项目。
- 体积较大：由于 Expo 包含大量的库，即使你不使用它们，生成的应用体积也相对较大。

2. 快速入门：Expo 项目创建

首先，安装 Expo CLI 并创建新项目：

npm install -g expo-cli
expo init my-app

选择合适的模板，比如：

blank：一个空白项目，适合从零开始构建。
tabs：包含底部导航栏的模板，适合多页面应用。

运行项目：

cd my-app
expo start

使用 Expo Go 应用扫描提供的二维码，就可以在手机上预览项目。

3. 调试技巧

3.1 使用 Expo Go 进行实时调试

Expo 提供了一个叫做 Expo Go 的应用，你可以通过手机扫码实时预览你的应用。Expo Go 会在手机上运行 JavaScript 代码，因此你不需要每次更改都重新构建应用。

iOS：使用 Metro bundler 提供的二维码，通过 iOS Expo Go App 扫描。
Android：同样可以使用 Expo Go 扫描二维码，或者使用 USB 连接设备。

3.2 使用 DevTools 和 React Developer Tools

Expo CLI 自动提供了开发者工具（DevTools），你可以通过浏览器访问这个工具（通常是 http://localhost:19002）。

React Developer Tools：用于调试 React 组件树和 props。
Console log：你可以直接在开发者工具的控制台中查看日志。

3.3 错误边界

在开发移动应用时，尽量使用 React 的 Error Boundaries 来捕获渲染时的错误，避免因单个组件崩溃影响整个应用。

class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, info) {// 记录错误日志console.error(error, info);}render() {if (this.state.hasError) {return <Text>Something went wrong.</Text>;}return this.props.children;}
}

使用时包裹需要保护的组件：

<ErrorBoundary><YourComponent />
</ErrorBoundary>

4. 常用 Expo API 和插件

Expo 提供了丰富的 API 来处理常见的移动设备功能。

4.1 相机功能

通过 expo-camera 来访问设备的相机。

expo install expo-camera

在组件中使用：

import { Camera } from 'expo-camera';
import { useState, useEffect } from 'react';
import { Button, View, Text } from 'react-native';export default function CameraExample() {const [hasPermission, setHasPermission] = useState(null);const [cameraRef, setCameraRef] = useState(null);useEffect(() => {(async () => {const { status } = await Camera.requestCameraPermissionsAsync();setHasPermission(status === 'granted');})();}, []);if (hasPermission === null) {return <Text>Requesting for camera permission</Text>;}if (hasPermission === false) {return <Text>No access to camera</Text>;}return (<View><Camera style={{ flex: 1 }} ref={(ref) => setCameraRef(ref)} /><Button title="Take Photo" onPress={async () => {if (cameraRef) {let photo = await cameraRef.takePictureAsync();console.log(photo);}}} /></View>);
}

4.2 定位功能

通过 expo-location 来访问设备的地理位置信息。

expo install expo-location

在组件中使用：

import * as Location from 'expo-location';
import { useState, useEffect } from 'react';
import { Text, View } from 'react-native';export default function LocationExample() {const [location, setLocation] = useState(null);const [errorMsg, setErrorMsg] = useState(null);useEffect(() => {(async () => {let { status } = await Location.requestForegroundPermissionsAsync();if (status !== 'granted') {setErrorMsg('Permission to access location was denied');return;}let location = await Location.getCurrentPositionAsync({});setLocation(location);})();}, []);let text = 'Waiting..';if (errorMsg) {text = errorMsg;} else if (location) {text = JSON.stringify(location);}return (<View><Text>{text}</Text></View>);
}

4.3 推送通知

使用 expo-notifications 来处理推送通知。

expo install expo-notifications

基础用法：

import * as Notifications from 'expo-notifications';
import { useEffect, useState } from 'react';
import { Button, View, Text } from 'react-native';export default function NotificationExample() {const [expoPushToken, setExpoPushToken] = useState('');useEffect(() => {registerForPushNotificationsAsync().then(token => setExpoPushToken(token));}, []);async function registerForPushNotificationsAsync() {let token;const { status: existingStatus } = await Notifications.getPermissionsAsync();let finalStatus = existingStatus;if (existingStatus !== 'granted') {const { status } = await Notifications.requestPermissionsAsync();finalStatus = status;}if (finalStatus !== 'granted') {return;}token = (await Notifications.getExpoPushTokenAsync()).data;console.log(token);return token;}return (<View><Text>Your expo push token: {expoPushToken}</Text></View>);
}

4.4 文件系统

使用 expo-file-system 来读写文件。

expo install expo-file-system

使用示例：

import * as FileSystem from 'expo-file-system';async function readFile() {const fileUri = FileSystem.documentDirectory + 'text.txt';const content = await FileSystem.readAsStringAsync(fileUri);console.log(content);
}async function writeFile() {const fileUri = FileSystem.documentDirectory + 'text.txt';await FileSystem.writeAsStringAsync(fileUri, 'Hello World!');
}

5. 优化建议

5.1 减少重新渲染

React Native 的性能取决于渲染的次数。使用 React.memo 和 useCallback 等优化工具减少不必要的重新渲染。

const MyComponent = React.memo(function MyComponent({ prop1, prop2 }) {// 组件逻辑
});

5.2 使用 FlatList 代替 ScrollView

对于长列表，使用 FlatList 替代 ScrollView，因为 FlatList 只渲染当前可见的部分，而 ScrollView 会一次性渲染所有内容。

<FlatListdata={data}renderItem={({ item }) => <Text>{item.key}</Text>}keyExtractor={item => item.id}
/>

6. 项目的 Eject 操作

如果你需要使用一些 Expo 不支持的原生功能或第三方库，可以使用 expo eject 将项目转换为纯 React Native 项目。

expo eject