React Native如何向DrawerNavigator传递参数优化代码？

看来你已经迈出了复用WebView组件的第一步，但还在被重复的路由配置困扰——完全理解这种冗余代码让人头疼的感觉！其实React Navigation的DrawerNavigator本身就支持参数传递，咱们可以通过几种实用方式彻底简化你的代码：

方案1：利用Screen的initialParams预设参数（最简洁直接） #

不用为每个页面单独写重复的组件代码，只需要给每个Drawer.Screen配置预设参数，让你的StaticWebView组件直接读取这些参数即可：

第一步：修改DrawerNavigator配置 #

import { createDrawerNavigator } from '@react-navigation/drawer';
import StaticWebView from './StaticWebView';

const Drawer = createDrawerNavigator();

function AppDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen 
        name="CreditsPage" 
        component={StaticWebView}
        // 预设当前页面的URL和标题
        initialParams={{ 
          url: 'https://your-credits-url.com',
          pageTitle: 'Credits'
        }}
        options={{ title: 'Credits' }}
      />
      <Drawer.Screen 
        name="TermsOfUsePage" 
        component={StaticWebView}
        initialParams={{ 
          url: 'https://your-terms-url.com',
          pageTitle: 'Terms of Use'
        }}
        options={{ title: 'Terms of Use' }}
      />
      <Drawer.Screen 
        name="LegalNoticePage" 
        component={StaticWebView}
        initialParams={{ 
          url: 'https://your-legal-url.com',
          pageTitle: 'Legal Notice'
        }}
        options={{ title: 'Legal Notice' }}
      />
    </Drawer.Navigator>
  );
}

第二步：在StaticWebView中读取参数 #

import { WebView } from 'react-native-webview';
import { useRoute, useNavigation } from '@react-navigation/native';
import React from 'react';

export default function StaticWebView() {
  const route = useRoute();
  const navigation = useNavigation();
  const { url, pageTitle } = route.params;

  // 可选：用预设的title更新页面头部
  React.useLayoutEffect(() => {
    navigation.setOptions({ title: pageTitle });
  }, [navigation, pageTitle]);

  return <WebView source={{ uri: url }} />;
}

这种方式既保留了每个页面独立的抽屉入口，又完全复用了StaticWebView组件，没有任何冗余代码。

方案2：动态路由+导航传参（适合需要动态切换URL的场景） #

如果不想在Drawer里显示通用路由，还可以只配置一个通用的StaticWebView路由，然后通过自定义抽屉项的点击事件传递参数：

function AppDrawer() {
  return (
    <Drawer.Navigator>
      {/* 隐藏通用路由的抽屉入口 */}
      <Drawer.Screen 
        name="StaticWebView" 
        component={StaticWebView}
        options={{ drawerItemStyle: { display: 'none' } }}
      />
      {/* 自定义抽屉项的点击逻辑，传递对应参数 */}
      <Drawer.Screen 
        name="Credits" 
        options={{ title: 'Credits' }}
        listeners={{
          press: (e) => {
            e.preventDefault(); // 阻止默认导航行为
            e.navigation.navigate('StaticWebView', {
              url: 'https://your-credits-url.com',
              pageTitle: 'Credits'
            });
          }
        }}
      />
      {/* 重复上述逻辑配置Terms和Legal页面 */}
    </Drawer.Navigator>
  );
}

StaticWebView组件的代码和方案1一致，依然通过route.params读取参数。

方案3：工厂函数生成页面组件（适合大量相似页面场景） #

如果后续还要添加更多类似的WebView页面，可以用工厂函数批量生成组件，让Drawer配置更干净：

import { useNavigation } from '@react-navigation/native';
import React from 'react';
import StaticWebView from './StaticWebView';

// 工厂函数：传入URL和标题，返回对应的页面组件
const createWebViewScreen = (url, pageTitle) => () => {
  const navigation = useNavigation();
  
  React.useLayoutEffect(() => {
    navigation.setOptions({ title: pageTitle });
  }, [navigation]);

  return <StaticWebView url={url} />;
};

// 批量生成三个页面组件
const CreditsPage = createWebViewScreen('https://your-credits-url.com', 'Credits');
const TermsOfUsePage = createWebViewScreen('https://your-terms-url.com', 'Terms of Use');
const LegalNoticePage = createWebViewScreen('https://your-legal-url.com', 'Legal Notice');

// 正常配置DrawerNavigator
function AppDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="CreditsPage" component={CreditsPage} />
      <Drawer.Screen name="TermsOfUsePage" component={TermsOfUsePage} />
      <Drawer.Screen name="LegalNoticePage" component={LegalNoticePage} />
    </Drawer.Navigator>
  );
}

这三种方案里，方案1应该最贴合你的需求——兼顾了代码简洁性和页面路由的独立性。

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