踏上 React Native 的学习之路

作为一名熟悉 React 的 Web 前端开发者，我一直对移动应用开发充满好奇。当我听说可以用已有的 JavaScript 和 React 知识来开发原生移动应用时，便决定学习 React Native。这篇文章记录了我这个初学者在学习 React Native 过程中的体验、困惑和解决方案，希望能帮助其他想要入门的前端开发者。

初识 React Native：环境搭建的挑战

第一步：安装开发环境

作为一个初学者，环境搭建是我遇到的第一个挑战。按照官方文档，我有两种选择：Expo CLI 和 React Native CLI。经过研究，我选择了 Expo 作为入门方式，因为它简化了很多配置过程。

安装 Expo CLI：

npm install -g expo-cli

创建第一个项目：

expo init MyFirstApp

在选项中，我选择了"blank"模板作为开始。项目创建后，运行项目：

cd MyFirstApp
npm start

这时，我遇到了第一个坑：终端显示了一个二维码，但我并不知道接下来该怎么做。

解决方案：

原来，我需要在手机上安装 Expo Go 应用，然后扫描终端中的二维码来在手机上运行我的应用。

安装 Expo Go 后，我终于看到了手机上显示"Hello World!"的画面，那一刻感到非常兴奋！

教训：React Native 的环境搭建比纯 Web 开发要复杂一些，需要更多步骤。选择 Expo 可以简化初期的开发流程，特别适合初学者。

坑一：布局系统的不同

问题描述：

作为 Web 开发者，我习惯了 CSS 的布局系统。当我开始编写 React Native 的样式时，发现很多属性看起来熟悉，但行为却不同：

// 我的第一次尝试
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text>Box 1</Text>
      </View>
      <View style={styles.box}>
        <Text>Box 2</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: "#fff",
    display: "block", // 这在RN中不起作用！
  },
  box: {
    width: "50%", // 这在某些情况下不起作用！
    height: 100,
    backgroundColor: "lightblue",
    margin: 10,
    float: "left", // RN中没有float属性！
  },
});

结果完全不如我预期，布局混乱。

解决方案：

经过学习，我了解到 React Native 使用的是 Flexbox 布局，而且默认方向是 column 而不是 row：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#fff",
    flexDirection: "row", // 水平排列子元素
    flexWrap: "wrap", // 允许换行
  },
  box: {
    width: "45%", // 在flexbox下生效
    height: 100,
    backgroundColor: "lightblue",
    margin: 10,
    justifyContent: "center",
    alignItems: "center",
  },
});

我还学到了几个重要的区别：

React Native 没有 CSS 的 display 属性，一切都基于 Flexbox
默认 flexDirection 是'column'而不是'row'
尺寸单位不需要写'px'，直接使用数字
百分比宽度需要配合 Flexbox 正确使用

教训：虽然 React Native 的样式看起来像 CSS，但实际上只是一个子集，而且有自己的特性。理解 Flexbox 布局是掌握 RN 布局的关键。

坑二：平台差异的处理

问题描述：

编写了一个简单的按钮组件后，我发现它在 Android 和 iOS 上的外观和行为有很大差异。在 iOS 上看起来很好，但在 Android 上样式完全不同：

// 按钮组件
import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";

const Button = ({ title, onPress }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#2196F3",
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: "white",
    textAlign: "center",
    fontWeight: "bold",
  },
});

export default Button;

解决方案：

我学习了几种处理平台差异的方法：

Platform 模块：

import { Platform, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#2196F3",
    padding: 10,
    borderRadius: 5,
    ...Platform.select({
      ios: {
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 2,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

平台特定扩展名：

创建两个文件：Button.ios.js和Button.android.js，React Native 会根据运行平台自动选择正确的文件。

针对特定平台的组件：

import { Platform } from "react-native";

const Button = Platform.select({
  ios: () => require("./ButtonIOS"),
  android: () => require("./ButtonAndroid"),
})();

教训：移动应用开发中，平台差异是不可避免的。React Native 提供了多种方式处理这些差异，可以根据组件的复杂性选择合适的方法。简单差异用 Platform.select，复杂组件用平台特定文件。

坑三：导航系统的复杂性

问题描述：

在 Web 开发中，我习惯了使用 React Router 处理路由。当我开始构建多屏幕应用时，发现 React Native 没有内置的导航解决方案，需要使用第三方库。

我最初尝试自己实现一个简单的导航：

// 我天真的尝试
import React, { useState } from "react";
import { View } from "react-native";
import HomeScreen from "./screens/HomeScreen";
import DetailsScreen from "./screens/DetailsScreen";

export default function App() {
  const [currentScreen, setCurrentScreen] = useState("Home");

  const navigateTo = (screen) => {
    setCurrentScreen(screen);
  };

  return (
    <View style={{ flex: 1 }}>
      {currentScreen === "Home" && <HomeScreen navigate={navigateTo} />}
      {currentScreen === "Details" && <DetailsScreen navigate={navigateTo} />}
    </View>
  );
}

这种方法在简单应用中可行，但很快就遇到了限制：无法处理返回按钮、无法传递参数、无法实现复杂的导航模式（标签、抽屉等）。

解决方案：

学习后，我选择了 React Navigation 库，这是 RN 社区最流行的导航解决方案：

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context

然后，根据需要安装导航类型：

npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

基本设置：

import "react-native-gesture-handler";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screens/HomeScreen";
import DetailsScreen from "./screens/DetailsScreen";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: "首页" }}
        />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          options={{ title: "详情" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在屏幕组件中使用导航：

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate("Details", { itemId: 86 })}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  // 获取传递的参数
  const { itemId } = route.params;

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Text>Item ID: {itemId}</Text>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

教训：React Native 的导航比 Web 复杂得多，几乎所有实际项目都需要使用第三方导航库。React Navigation 是当前最流行的选择，提供了丰富的导航模式和良好的自定义性。花时间掌握它是值得的。

坑四：列表渲染与性能

问题描述：

当我尝试渲染一个较长的列表时，使用了从 React 中学到的方法：

import React from "react";
import { View, Text, ScrollView } from "react-native";

export default function LongList() {
  // 假设有1000个项目的数组
  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);

  return (
    <ScrollView>
      {items.map((item, index) => (
        <View key={index} style={{ padding: 20, borderBottomWidth: 1 }}>
          <Text>{item}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

这个组件在模拟器上运行时非常卡顿，滚动体验很差。

解决方案：

我了解到 React Native 提供了专门的高性能列表组件：

FlatList：用于简单的垂直列表
SectionList：用于分组的列表
VirtualizedList：更底层的列表实现

使用 FlatList 改进后的代码：

import React from "react";
import { View, Text, FlatList } from "react-native";

export default function LongList() {
  // 假设有1000个项目的数组
  const items = Array.from({ length: 1000 }, (_, i) => ({
    id: i.toString(),
    title: `Item ${i}`,
  }));

  const renderItem = ({ item }) => (
    <View style={{ padding: 20, borderBottomWidth: 1 }}>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      initialNumToRender={10}
      maxToRenderPerBatch={20}
      windowSize={21}
    />
  );
}

FlatList 的主要优点：

只渲染可见的项目
项目滚出视图时释放内存
内置滚动加载功能
性能配置选项

教训：在 React Native 中，渲染长列表时应始终使用专门的列表组件，而不是 ScrollView + map 的组合。理解 FlatList 等组件的性能配置选项也很重要，可以根据具体场景进行优化。

坑五：网络请求与状态管理

问题描述：

在 Web 开发中，我习惯使用fetch或axios进行 API 请求。我在 RN 中尝试了类似的方法：

import React, { useState, useEffect } from "react";
import { View, Text, Button } from "react-native";

export default function ApiExample() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = () => {
    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setIsLoading(false);
      });
  };

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

  if (isLoading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error}</Text>;
  if (!data) return <Text>No data</Text>;

  return (
    <View>
      <Text>Title: {data.title}</Text>
      <Text>Body: {data.body}</Text>
      <Button title="Refresh" onPress={fetchData} />
    </View>
  );
}

虽然这段代码可以工作，但随着应用复杂度增加，这种状态管理方式变得难以维护。

解决方案：

经过学习，我采用了更结构化的方法处理网络请求和状态管理：

使用 React Query 库：

npm install react-query

import React from "react";
import { View, Text, Button } from "react-native";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";

const queryClient = new QueryClient();

function Post() {
  const { isLoading, error, data, refetch } = useQuery("postData", () =>
    fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) =>
      response.json()
    )
  );

  if (isLoading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error.message}</Text>;

  return (
    <View>
      <Text>Title: {data.title}</Text>
      <Text>Body: {data.body}</Text>
      <Button title="Refresh" onPress={() => refetch()} />
    </View>
  );
}

export default function ApiExample() {
  return (
    <QueryClientProvider client={queryClient}>
      <Post />
    </QueryClientProvider>
  );
}

集成 Redux（适用于大型应用）：

npm install redux react-redux redux-thunk

教训：随着应用复杂度增加，简单的 useState 管理请求状态变得不够用。使用专门的库如 React Query 可以大大简化数据获取流程，并提供缓存、重试和无效化等功能。对于更复杂的状态管理需求，Redux 仍然是一个强大的选择。

坑六：设备 API 和权限处理

问题描述：

当我开始使用设备功能（如相机、位置、通知等）时，遇到了权限处理的问题。我最初的代码没有适当处理权限：

import React, { useState } from "react";
import { View, Button, Image } from "react-native";
import * as ImagePicker from "expo-image-picker";

export default function CameraExample() {
  const [image, setImage] = useState(null);

  const takePhoto = async () => {
    // 没有检查或请求权限
    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Take Photo" onPress={takePhoto} />
      {image && (
        <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
      )}
    </View>
  );
}

在 Android 上，这段代码会失败，因为没有请求相机权限。

解决方案：

学习后，我了解到正确处理设备权限的模式：

import React, { useState, useEffect } from "react";
import { View, Button, Image, Text, Alert } from "react-native";
import * as ImagePicker from "expo-image-picker";

export default function CameraExample() {
  const [image, setImage] = useState(null);
  const [permissionStatus, setPermissionStatus] = useState(null);

  useEffect(() => {
    (async () => {
      // 检查权限状态
      const { status } = await ImagePicker.requestCameraPermissionsAsync();
      setPermissionStatus(status);
    })();
  }, []);

  const takePhoto = async () => {
    // 再次检查权限
    if (permissionStatus !== "granted") {
      Alert.alert("需要权限", "我们需要相机权限来拍照", [
        { text: "取消", style: "cancel" },
        { text: "设置", onPress: () => openSettings() },
      ]);
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };

  // 这个函数在Expo中需要特殊处理
  const openSettings = () => {
    // 通常会打开设备设置
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      {permissionStatus !== "granted" && (
        <Text style={{ marginBottom: 20, color: "red" }}>需要相机权限</Text>
      )}
      <Button
        title="Take Photo"
        onPress={takePhoto}
        disabled={permissionStatus !== "granted"}
      />
      {image && (
        <Image
          source={{ uri: image }}
          style={{ width: 200, height: 200, marginTop: 20 }}
        />
      )}
    </View>
  );
}

教训：在移动应用中，使用设备功能前必须正确处理权限。这包括检查权限状态、请求权限和处理权限被拒绝的情况。在 Expo 中，可以使用各种 expo-*库轻松访问设备 API，但仍需要处理权限逻辑。

坑七：样式和主题的管理

问题描述：

随着应用组件增多，我的样式代码变得越来越混乱。每个组件都有自己的 StyleSheet，导致重复代码多、主题更改困难：

// 按钮组件的样式
const styles = StyleSheet.create({
  button: {
    backgroundColor: "#2196F3",
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: "white",
    fontSize: 16,
  },
});

// 卡片组件的样式
const cardStyles = StyleSheet.create({
  card: {
    backgroundColor: "white",
    borderRadius: 5,
    padding: 15,
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 5,
    elevation: 3,
  },
  cardTitle: {
    fontSize: 18,
    color: "#333",
    marginBottom: 10,
  },
});

想要改变应用的颜色主题，需要修改多个文件。

解决方案：

我学习了几种管理样式和主题的方法：

创建统一的主题文件：

// theme.js
export const colors = {
  primary: "#2196F3",
  secondary: "#FF9800",
  text: "#333333",
  background: "#FFFFFF",
  error: "#FF5252",
};

export const spacing = {
  small: 5,
  medium: 10,
  large: 15,
  xlarge: 20,
};

export const typography = {
  title: {
    fontSize: 20,
    fontWeight: "bold",
    color: colors.text,
  },
  body: {
    fontSize: 16,
    color: colors.text,
  },
  button: {
    fontSize: 16,
    fontWeight: "500",
  },
};

创建可重用的样式组件：

// Button.js
import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";
import { colors, spacing, typography } from "./theme";

export default function Button({ title, onPress, type = "primary" }) {
  return (
    <TouchableOpacity
      style={[styles.button, type === "secondary" && styles.buttonSecondary]}
      onPress={onPress}
    >
      <Text style={[styles.text, type === "secondary" && styles.textSecondary]}>
        {title}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    padding: spacing.medium,
    borderRadius: 5,
    alignItems: "center",
  },
  buttonSecondary: {
    backgroundColor: colors.secondary,
  },
  text: {
    ...typography.button,
    color: "white",
  },
  textSecondary: {
    color: "white",
  },
});

使用 React Context 实现主题切换：

// ThemeContext.js
import React, { createContext, useState, useContext } from "react";
import { lightTheme, darkTheme } from "./themes";

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(false);
  const theme = isDark ? darkTheme : lightTheme;

  const toggleTheme = () => {
    setIsDark(!isDark);
  };

  return (
    <ThemeContext.Provider value={{ theme, isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

教训：随着应用规模增长，样式管理变得越来越重要。创建统一的主题系统可以减少重复代码，使样式更一致，并简化主题更改。对于大型应用，考虑使用 React Context 或第三方库（如 styled-components）来管理主题。

坑八：应用发布与打包

问题描述：

完成应用开发后，我面临着如何将应用发布到应用商店的问题。作为 Web 开发者，这是一个全新的挑战。

解决方案：

我了解到发布 React Native 应用的基本流程：

使用 Expo 管理的发布（简单但有限制）：

# 构建Android应用
expo build:android -t app-bundle

# 构建iOS应用
expo build:ios

构建完成后，Expo 会提供下载链接，然后可以将生成的文件上传到各自的应用商店。

自行管理的发布（需要 eject 或使用 RN CLI）：

对于 Android：

生成签名密钥
在 app/build.gradle 中配置签名
运行./gradlew bundleRelease
上传到 Google Play Console

对于 iOS：

在 Xcode 中配置证书和配置文件
创建 Archive
上传到 App Store Connect

教训：移动应用的发布过程比 Web 复杂得多，需要处理证书、签名、版本号等问题。使用 Expo 可以简化这个过程，但有一些限制。对于复杂应用，可能需要 eject 或直接使用 React Native CLI 来获得更多控制权。无论哪种方式，都应该提前了解发布流程，将其纳入开发计划中。

总结与反思

作为一名前端开发者，学习 React Native 的过程既充满挑战，也很有收获。最初的那种"我已经懂 React 了，RN 应该很容易"的想法很快被现实打破，但正是这些挑战让我成长。

最大的困难是适应移动开发的思维模式，包括：

布局系统与 Web 不同
平台差异需要特别处理
性能考虑更为重要
设备 API 和权限管理
发布流程更复杂

然而，React Native 确实兑现了其承诺：让我用已有的 JavaScript 和 React 知识来开发真正的原生应用。学习曲线虽陡，但远比从头学习 Swift 或 Kotlin 要平缓得多。

对于其他想学习 React Native 的前端开发者，我的建议是：

确保先掌握 React 基础，特别是 hooks 和组件模式
使用 Expo 开始，它简化了许多复杂操作
花时间真正理解 Flexbox 在 RN 中的工作方式
在真实设备上测试，不要只依赖模拟器
学习使用 React Navigation，它几乎是必需的
理解 FlatList 等性能组件的重要性
注意处理平台差异，而不是寄希望于"写一次，到处运行"

随着我继续深入 React Native 开发，我越来越欣赏它的强大和灵活性。虽然它不是万能的，但对于大多数应用需求，RN 提供了一个高效的跨平台解决方案。

希望我的学习笔记能帮助你避开一些常见的坑！记住，每一个开发者都会经历这些挑战，重要的是保持学习的热情和解决问题的决心。