如何在React Native Web复用React Navigation代码并统一配置导航？

嘿，这个问题我刚好踩过坑，其实完全不用单独为Web端切换到React Router——React Navigation从v6版本开始就对React Native Web有很好的支持！只要做一点适配配置，就能实现一套导航代码跑双平台。下面我给你一步步讲清楚：

React Navigation v6+ 原生支持React Native Web，底层会复用React Router的能力，所以你只需要做少量适配，就能直接复用移动端的导航代码，不需要两套分开的路由逻辑。

1. 安装必要依赖 #

首先确保你安装了所有需要的包，包括React Navigation核心、栈导航器，以及Web端需要的React Router和React Native Web：

npm install @react-navigation/native @react-navigation/native-stack react-native-web react-dom react-router-dom
# 或者用yarn
yarn add @react-navigation/native @react-navigation/native-stack react-native-web react-dom react-router-dom

2. 分离平台入口文件 #

因为Web端需要用BrowserRouter包裹导航容器，而移动端不需要，所以我们可以创建两个入口文件：

• 移动端入口：index.native.js（或默认的index.js）
• Web端入口：index.web.js

3. 编写统一的导航配置 #

创建一个跨平台的导航组件，移动端和Web端共用这部分代码。

1. 统一导航组件（AppNavigator.js） #

这部分代码完全跨平台，和你移动端的导航代码几乎一样：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createNativeStackNavigator();

export default function AppNavigator() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen 
        name="Home" 
        component={HomeScreen}
        options={{ title: '首页' }}
      />
      {/* 可以自定义Web端的URL路径 */}
      <Stack.Screen 
        name="Details" 
        component={DetailsScreen}
        options={{ 
          title: '详情页',
          path: 'details/:itemId' // Web端会映射为 /details/123 这样的URL
        }}
      />
    </Stack.Navigator>
  );
}

2. 跨平台的App根组件（App.js） #

这个组件在双平台都可以用，不需要修改：

import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './AppNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}

3. 移动端入口文件（index.native.js） #

和你原来的移动端入口一致：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

4. Web端入口文件（index.web.js） #

这里只需要用BrowserRouter包裹App组件，让React Navigation能处理Web端的路由历史：

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

5. 示例页面组件（HomeScreen.js） #

页面里的导航逻辑完全跨平台，和移动端写法一样：

import { View, Text, Button, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>首页</Text>
      <Button
        title="跳转到详情页"
        onPress={() => navigation.navigate('Details', { itemId: 123 })}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

6. 详情页组件（DetailsScreen.js） #

同样跨平台，获取参数的方式也和移动端一致：

import { View, Text, Button, StyleSheet } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';

export default function DetailsScreen() {
  const route = useRoute();
  const navigation = useNavigation();
  const { itemId } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>详情页</Text>
      <Text style={styles.text}>当前Item ID: {itemId}</Text>
      <Button
        title="返回首页"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 10,
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
  },
});

如果Web端还是不能正常运行，可能是这些原因：

• 你用了React Navigation v5或更早版本：建议升级到v6，旧版本对Web的支持不够完善
• 忘记在Web入口包裹BrowserRouter：这是Web端路由正常工作的关键
• 依赖版本不兼容：确保所有相关包的版本匹配，比如react-router-dom最好用v6版本（和React Navigation v6对应）

这样配置之后，你就能用同一套导航代码同时跑在移动端和Web端，Web端的URL会自动和路由对应，刷新页面或者直接访问URL也能正常跳转。

内容的提问来源于stack exchange，提问作者Balasubramanian