使用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 会一次性渲染所有内容。

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

6. 项目的 Eject 操作

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

expo eject