Expo开发小技巧

在使用 Expo 和 React Native (RN)
开发应用时，需要注意一些关键点，同时要掌握一些常用的基础知识与开发技巧。以下将对 Expo 的注意事项及 React Native
开发的基础知识进行详细总结，帮助你高效构建移动应用。

---

一、使用 Expo 开发 React Native 应用需要注意的事项

Expo 提供了丰富的功能和工具，但也有一些特定的注意事项和限制需要了解。

1. Expo 的优点和局限性

1.1 优点

• 快速开发：Expo 提供了大量的开箱即用功能，帮助你快速开始项目，如相机、文件系统、推送通知等。
• 跨平台一致性：Expo 让你的代码能无缝运行在 iOS 和 Android 平台上，无需处理复杂的原生代码。
• 实时开发：使用 Expo Go 进行快速调试，无需每次都重新编译和安装应用。
• 自动打包与发布：通过 Expo Managed Workflow，你可以轻松地在 Expo 的托管服务上打包和发布应用。

1.2 局限性

• 不支持原生代码扩展：Expo 项目默认不支持自定义原生模块或库。如果需要使用第三方原生库或者自定义原生代码，可能需要使用 expo eject 来脱离 Expo 环境。
• 应用体积较大：由于包含了大量不使用的功能，生成的应用体积可能较大。
• 性能限制：对于某些需要高性能优化的应用（如游戏或大规模的动画处理），可能需要直接使用 React Native 而不是依赖 Expo。

2. Expo 项目中的 ejection 操作

在使用 Expo 开发过程中，如果遇到 Expo 不支持的库（需要自定义原生代码），你可以执行 ejection 操作，将项目转换为标准的 React Native 项目。

• 什么时候需要 eject？
  • 当你需要使用非 Expo 支持的第三方原生库时（例如一些不兼容的支付集成库）。
  • 需要深入优化或定制应用的性能。

expo eject

• Eject 之后的注意事项：
  • 你需要管理原生的 iOS 和 Android 代码。
  • 失去了一些 Expo 提供的自动化功能（如轻松打包和推送通知），需要自行配置和维护。

3. 常用的 Expo API

Expo 提供了大量的开箱即用的 API，以下是一些常见的 API：

• Camera API：用于调用设备相机，拍摄照片或视频。

  expo install expo-camera
  

• Location API：用于获取设备的地理位置。

  expo install expo-location
  

• Notifications API：用于推送通知。

  expo install expo-notifications
  

• File System API：访问和管理设备文件系统。

  expo install expo-file-system
  

• ImagePicker API：让用户选择图片或视频。

  expo install expo-image-picker
  

4. 发布与 OTA 更新

• 发布：Expo 支持直接发布到 iOS App Store 和 Android Play Store。你可以使用 expo build 打包应用并发布到应用商店。

  expo build:android
  expo build:ios
  

• OTA 更新（Over The Air Updates）：Expo 支持通过 OTA 更新机制来直接更新你的应用，不需要重新提交应用到商店。

  expo publish
  

---

二、React Native 开发中需要掌握的基础知识与常用技巧

使用 React Native 开发时，除了 Expo 的相关知识外，还需要了解一些基础概念、常用组件、核心 API 及开发技巧。

1. React Native 的核心概念

1.1 基于组件的开发模式

React Native 是基于 React 框架的，它的核心开发方式是组件化开发。所有 UI 都是通过构建和组合组件来实现的。

1.2 JSX

React Native 使用 JSX，这是 JavaScript 的语法扩展，可以像编写 HTML 一样编写组件。比如：

const App = () => {
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  );
};

2. 常用组件

2.1 View 和 Text

• View：React Native 中的基础布局容器，类似于 div。
• Text：用于显示文本内容。

<View>
  <Text>Hello, World!</Text>
</View>

2.2 ScrollView

用于滚动长内容，如果你需要在应用中展示一个可以滚动的内容区域，使用 ScrollView。

<ScrollView>
  <Text>Scrollable Content</Text>
</ScrollView>

2.3 Image

用于显示图片。Image 组件支持加载本地图片和网络图片。

<Image source={{ uri: 'https://example.com/image.png' }} style={{ width: 100, height: 100 }} />

2.4 Touchable 系列组件

• TouchableOpacity、TouchableHighlight 等用于响应用户点击。

<TouchableOpacity onPress={() => alert('Pressed!')}>
  <Text>Press Me</Text>
</TouchableOpacity>

3. 核心 API

3.1 State 和 Props

• State：是组件自身的状态，通常通过 useState 来管理。
• Props：父组件通过 props 向子组件传递数据。

const [count, setCount] = useState(0);

return (
  <View>
    <Text>{count}</Text>
    <Button title="Increment" onPress={() => setCount(count + 1)} />
  </View>
);

3.2 Hooks

React Native 和 React 一样支持 Hooks，最常用的两个是 useState 和 useEffect。

• useState：用于状态管理。
• useEffect：用于处理副作用（如数据获取、订阅事件等）。

useEffect(() => {
  // 组件挂载时执行
  console.log('Component Mounted');
}, []);

3.3 Navigation（导航）

React Native 通常使用第三方库 React Navigation 来处理多屏幕导航。

npm install @react-navigation/native @react-navigation/stack

基本的导航使用：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

4. 样式与布局

4.1 Flexbox 布局

React Native 默认使用 Flexbox 来管理布局。它与 CSS 中的 Flexbox 类似，但有一些不同之处：

• 默认 flexDirection 是 column，而不是 row。
• alignItems 和 justifyContent 决定了子元素的排列方式。

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text>Centered Text</Text>
</View>

4.2 StyleSheet

推荐使用 StyleSheet 来管理组件样式，增强性能：

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

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Styled Text</Text>
    </View>
  );
};

5. 优化建议

5.1 减少不必要的渲染

• 使用 React.memo 防止组件的重复渲染。
• 使用 useCallback 和 useMemo 来优化函数和值的重新计算。

5.2 使用 FlatList

对于长列表，使用 FlatList 而不是 ScrollView，因为 FlatList 只渲染当前可见的部分，优化了性能。

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

6. 常用第三方库

• Axios：用于数据请求和 API 通信。

bash
npm install axios

- **React Navigation**：用于管理多页面路由。
```bash
npm install @react-navigation/native

• Redux 或 Context API：用于全局状态管理。

---

通过掌握以上 Expo 和 React Native 的关键知识点和技巧，你将能够更好地使用这两者进行移动应用开发，尤其是使用 Expo 能够让开发过程更加快捷高效。