React Native脚手架选择与路由导航实战指南

React Native脚手架选择与实战指南

本文主要探讨React Native开发中脚手架的选择与使用，对比分析两种主流工具：React Native CLI和Expo CLI，并通过实战演示项目启动、外部依赖包集成以及路由导航的配置方法。

脚手架的选择

当前React Native生态中主要有两种脚手架：React Native CLI和Expo CLI。

React Native CLI 由Facebook官方维护，包含iOS、Android原生部分以及JavaScript代码。使用它需要安装Xcode和Android Studio，其最大优势在于灵活性高，允许直接操作原生模块并集成自定义依赖，适合对原生开发有经验、需要深度定制的项目。

Expo CLI 是Expo平台的一部分，提供了一套完整的开发、构建、发布工具链。它简化了配置过程，开发者可以专注于JavaScript代码，无需直接处理原生环境，适合快速原型开发和团队协作。Expo体系包括：

• Expo CLI：命令行工具，用于创建、运行和构建项目。
• Expo Go：移动端应用，可直接在设备上运行项目（无需编译）。
• Expo Snack：在线代码沙盒环境。
• Expo App Services：云服务，提供推送、构建等功能。

Expo内置了大量常用功能（如图片处理、推送通知等），但同时也限制了自定义原生模块的能力，更适合希望降低原生开发门槛、追求开发效率的团队。

实战：项目启动与导航配置

项目初始化与运行

首先全局安装Expo CLI：npm install -g expo-cli。在目标目录下执行expo init projectName并选择默认模板即可创建项目。项目下载完成后，通过yarn start启动开发服务器。

接着在移动设备上安装Expo Go应用，使用相机扫描终端显示的二维码即可在Expo Go中打开项目，实现实时预览和热重载。项目结构仅包含JavaScript代码，无需直接管理Android和iOS原生目录。

使用外部依赖包

以集成React Navigation为例，首先安装核心包：

yarn add @react-navigation/native @react-navigation/native-stack

然后通过Expo安装相关依赖：

expo install react-native-screens react-native-safe-area-context

对于第三方库的兼容性，可以访问React Native Directory网站进行筛选。Expo本身也提供了丰富的SDK（如相机、音频、推送等），若需使用不直接支持Expo的库，可切换到开发构建模式以启用原生定制能力。

配置路由导航

在App.js中设置导航容器和栈导航器：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './src/pages/Home';
import Settings from './src/pages/Settings';

const Stack = createNativeStackNavigator();

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

createNativeStackNavigator()返回的屏幕组件用于映射路由，默认渲染Home屏幕。在Home组件中，通过navigation.navigate('Settings')跳转到设置页。

参数传递与导航栏定制

在跳转时可通过第二个参数传递数据：

navigation.navigate('Home', { title: "自定义标题" });

在目标屏幕中通过route.params接收参数。若要自定义导航栏，可在Screen配置中添加options属性：

<Stack.Screen
  name="Settings"
  component={Settings}
  options={route => ({
    headerRight: () => <Button title="测试按钮" />
  })}
/>

底部Tab与侧边Drawer导航

安装额外导航包：

yarn add @react-navigation/bottom-tabs @react-navigation/drawer
expo install react-native-gesture-handler react-native-reanimated

在babel.config.js中添加插件：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"]
  };
};

在App.js中根据平台选择导航形式：

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Platform } from 'react-native';
import Home from './Home';
import News from './News';
import Settings from './Settings';

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      {Platform.OS === 'ios' && (
        <Tab.Navigator>
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="News" component={News} />
          <Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
      )}
      {Platform.OS == 'android' && (
        <Drawer.Navigator>
          <Drawer.Screen name="Home" component={Home} />
          <Drawer.Screen name="News" component={News} />
          <Drawer.Screen name="Settings" component={Settings} />
        </Drawer.Navigator>
      )}
    </NavigationContainer>
  );
}

这样即可在iOS上使用底部Tab栏，在Android上使用侧边抽屉导航。

总结

本文介绍了React Native开发中脚手架的选择策略，并通过实战详细讲解了Expo项目的启动、依赖管理以及路由导航的实现。掌握这些基础内容有助于快速进入React Native开发，后续可进一步学习新架构、原生模块桥接和性能优化等高级主题。