React Native(JS)：如何在常量内访问DrawerNav传入的Props？

嘿，我来帮你解决这个问题！看起来你是在React Navigation的Drawer导航里自定义了DrawerContent组件，但没法同时获取到props.item和DrawerNav传入的额外Props（包括你创建的常量），对吧？我给你几个实用的方案：

方案1：直接在Drawer.Navigator中传递自定义Props #

这是最直接的方式——在配置Drawer.Navigator的drawerContent属性时，把你的常量和默认导航Props一起传递给自定义的DrawerContent组件。

示例代码：

// 假设这是你的DrawerNav组件
const DrawerNav = () => {
  // 你创建的常量
  const myCustomConstant = "我是需要传递的常量";

  return (
    <Drawer.Navigator
      // 在这里把默认props和自定义常量一起传给DrawerContent
      drawerContent={(navigationProps) => (
        <DrawerContent 
          {...navigationProps}  // 传递默认的导航props（包括item）
          customProp={myCustomConstant}  // 传递你的自定义常量
        />
      )}
    >
      {/* 你的屏幕页面 */}
      <Drawer.Screen name="Home" component={HomeScreen} />
    </Drawer.Navigator>
  );
};

// 你的DrawerContent组件
const DrawerContent = (props) => {
  // 现在可以同时访问：
  // 1. 默认的props.item（来自导航）
  // 2. 自定义的props.customProp（你的常量）
  return (
    <View>
      <Text>导航Item：{props.item?.label}</Text>
      <Text>自定义常量：{props.customProp}</Text>
    </View>
  );
};

方案2：通过导航参数传递Screen级别的Props #

如果你的Props是来自某个Drawer.Screen页面，想传递到DrawerContent，可以用navigation.setParams把参数存入导航状态，再在DrawerContent中读取。

示例代码：

// 在某个Screen组件中设置参数
const HomeScreen = ({ navigation }) => {
  useEffect(() => {
    // 把页面的props存入导航参数
    navigation.setParams({ screenSpecificProp: "来自Home页面的参数" });
  }, [navigation]);

  return <Text>Home页面</Text>;
};

// 在DrawerContent中读取参数
const DrawerContent = (props) => {
  // 获取当前激活屏幕的参数
  const currentScreenParams = props.state.routes[props.state.index].params;
  
  return (
    <View>
      <Text>当前屏幕参数：{currentScreenParams?.screenSpecificProp}</Text>
      <Text>导航Item：{props.item?.label}</Text>
    </View>
  );
};

方案3：用React Context管理全局/跨组件Props #

如果你的常量需要在多个组件中共享，用React Context会更优雅，不用层层传递Props。

示例代码：

// 创建Context
import { createContext, useContext } from "react";

const MyContext = createContext();

// 在父组件（比如App或DrawerNav的父组件）中提供Context值
const App = () => {
  const myGlobalConstant = "全局共享的常量";

  return (
    <MyContext.Provider value={myGlobalConstant}>
      <DrawerNav />
    </MyContext.Provider>
  );
};

// 在DrawerContent中直接读取Context
const DrawerContent = (props) => {
  const myGlobalConstant = useContext(MyContext);

  return (
    <View>
      <Text>全局常量：{myGlobalConstant}</Text>
      <Text>导航Item：{props.item?.label}</Text>
    </View>
  );
};

以上三种方案里，方案1是最适合你当前场景的——直接把常量和默认导航Props一起传递给DrawerContent，就能轻松同时访问props.item和你的自定义常量啦！

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