如何在react-navigation的Drawer Navigator中为路由设置固定参数？

嘿，我完全懂你遇到的困扰——直接在StackNavigator的路由配置里写params确实达不到预期效果，因为这些参数只会在组件第一次初始化时被传入，而且没法随着路由切换动态更新。下面给你几个实用的解决方案，按推荐优先级排序：

方案1：用getScreen动态注入固定参数（最直接） #

React Navigation允许我们在路由配置里用getScreen函数，返回一个包装过的组件，把固定的sectionId直接作为props传递进去。这样每个路由对应的SectionPage都会自带专属的sectionId，不管从哪里跳转过来都能正确拿到值：

const stackRoutes = {
  WelcomePage: { screen: WelcomePage },
  ExplorePage: { screen: ExplorePage },
  RideSection: { 
    getScreen: () => (props) => <SectionPage {...props} sectionId={1} /> 
  },
  WalkSection: { 
    getScreen: () => (props) => <SectionPage {...props} sectionId={2} /> 
  },
  BikeSection: { 
    getScreen: () => (props) => <SectionPage {...props} sectionId={3} /> 
  }
};

之后在SectionPage里，你可以直接通过this.props.sectionId（类组件）或者props.sectionId（函数组件）获取参数，当路由切换时，组件会自动接收新的props并更新内容。记得在组件里监听这个参数的变化，触发数据重新加载：

// 函数组件示例
const SectionPage = ({ sectionId }) => {
  const [sectionData, setSectionData] = useState([]);

  useEffect(() => {
    // 根据sectionId请求对应板块的数据
    fetchSectionData(sectionId).then(data => setSectionData(data));
  }, [sectionId]);

  // 渲染板块内容
  return <div>{/* 渲染sectionData */}</div>;
};

方案2：跳转时显式传递参数（适合轻量场景） #

如果你不想修改Stack路由的配置，也可以在抽屉导航的跳转逻辑里，手动把sectionId作为参数传递过去。比如在抽屉的路由配置里自定义跳转行为：

const DrawerNavigatorConfig = {
  // 其他配置...
  contentComponent: (props) => (
    <ScrollView>
      <DrawerItems {...props} />
      {/* 或者自定义抽屉项 */}
      <TouchableOpacity 
        onPress={() => props.navigation.navigate('RideSection', { sectionId: 1 })}
      >
        <Text>骑行板块</Text>
      </TouchableOpacity>
      <TouchableOpacity 
        onPress={() => props.navigation.navigate('WalkSection', { sectionId: 2 })}
      >
        <Text>步行板块</Text>
      </TouchableOpacity>
    </ScrollView>
  )
};

然后在SectionPage里通过导航的getParam方法获取参数：

// 类组件
componentDidMount() {
  const sectionId = this.props.navigation.getParam('sectionId', 1); // 第二个参数是默认值
  this.fetchData(sectionId);
}

componentDidUpdate(prevProps) {
  const prevId = prevProps.navigation.getParam('sectionId', 1);
  const currentId = this.props.navigation.getParam('sectionId', 1);
  if (prevId !== currentId) {
    this.fetchData(currentId);
  }
}

这个方案的好处是路由配置更简洁，但需要确保所有跳转到SectionPage的地方都传递了正确的参数。

方案3：用Context/Redux管理板块状态（适合复杂应用） #

如果你的应用后续会扩展更多板块，或者需要在多个组件里共享当前板块的状态，推荐用React Context来全局管理sectionId：

首先创建一个Context：

import React, { createContext, useContext, useState } from 'react';

const SectionContext = createContext();

export const SectionProvider = ({ children }) => {
  const [currentSectionId, setCurrentSectionId] = useState(1); // 默认板块ID

  return (
    <SectionContext.Provider value={{ currentSectionId, setCurrentSectionId }}>
      {children}
    </SectionContext.Provider>
  );
};

export const useSection = () => useContext(SectionContext);

然后把App组件用SectionProvider包裹起来，在抽屉跳转时更新sectionId：

// 抽屉项的点击事件
onPress={() => {
  const { setCurrentSectionId } = useSection();
  setCurrentSectionId(1);
  props.navigation.navigate('SectionPage');
}}

最后在SectionPage里直接从Context获取sectionId：

const SectionPage = () => {
  const { currentSectionId } = useSection();
  const [sectionData, setSectionData] = useState([]);

  useEffect(() => {
    fetchSectionData(currentSectionId).then(data => setSectionData(data));
  }, [currentSectionId]);

  // 渲染内容
};

这个方案彻底解耦了路由和组件的参数依赖，适合大型应用的状态管理。

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