React Native复用自定义下拉菜单传值不生效及导航问题

问题1：外部传入的菜单项文本不生效 #

原因 #

你的CompactMenu组件没有接收外部传入的dropdownMenuItems属性，组件内部硬编码写死了默认的3个菜单项，外部传入的props被直接忽略，所以无论你外部传什么值，渲染的永远是组件内部定义的默认内容。

修复方案 #

修改CompactMenu组件，接收外部传入的props，外部传值时优先使用外部配置，未传值时回退到默认菜单项：

// CompactMenu.js
import React from 'react';
import {SafeAreaView} from 'react-native';
import {DropdownMenu} from './DropdownMenu';

// 接收外部传入的dropdownMenuItems参数
const CompactMenu = ({dropdownMenuItems: customMenuItems}) => {
  const backgroundStyle = {
    backgroundColor: '#fff',
    flex: 1,
    display: 'flex',
  };

  // 组件内置默认菜单项
  const defaultMenuItems = [
    {name: 'Messages', href: '/messages'},
    {name: 'Trips', href: '/trips'},
    {name: 'Saved', href: '/saved'},
  ];

  // 优先用外部传入的菜单项，没有就用默认值
  const finalMenuItems = customMenuItems ?? defaultMenuItems;

  return (
    <SafeAreaView style={backgroundStyle}>
      <DropdownMenu dropdownMenuItems={finalMenuItems} />
    </SafeAreaView>
  );
};

export default CompactMenu;

问题2：页面跳转逻辑报错 #

原因 #

你的判断是对的，React Native 中如果使用 React Navigation 做原生页面栈导航，确实需要通过navigation.navigate()实现跳转，不能直接用web端的href属性。你之前报错有两个核心原因：

• 你当前用的OpenURLButton是跳转系统浏览器打开web链接的组件，不支持原生页面导航逻辑，也不会识别你传入的自定义onPress事件
• 你直接在菜单项中写navigation相关代码时，没有在对应作用域拿到合法的navigation实例，触发了未定义报错

修复方案 #

1. 先改造DropdownMenu组件的菜单项渲染逻辑，不再硬依赖OpenURLButton，同时支持href（跳转web链接）和自定义onPress（原生导航/其他自定义事件）两种配置：
   注意：使用Linking.openURL需要先从react-native中导入Linking模块，原代码中未定义的fadeAnim、translateAnim需要补充对应的Animated动画初始化逻辑，否则会触发报错。

// DropdownMenu.js 内FlatList的renderItem部分修改
<FlatList
  data={dropdownMenuItems}
  renderItem={({item, index}) => (
    <TouchableOpacity
      // 点击时优先触发自定义onPress，没有的话尝试调用Linking打开传入的href链接
      onPress={() => {
        if (item.onPress) {
          item.onPress();
          setIsActive(false); // 点击菜单项后自动关闭菜单
          return;
        }
        if (item.href) {
          Linking.openURL(item.href);
          setIsActive(false);
        }
      }}
      style={
        index === 0
          ? {borderTopLeftRadius: 8, borderTopRightRadius: 8}
          : index === dropdownMenuItems.length - 1
          ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}
          : {}
      }
    >
      <Text style={styles.menuItemText}>{item.name}</Text>
    </TouchableOpacity>
  )}
/>

2. 要使用navigation做页面跳转，需要保证组件在导航容器上下文中，通过useNavigation钩子拿到导航实例即可，不需要手动从上层层层传递：

// 外部使用CompactMenu的示例
import { useNavigation } from '@react-navigation/native';

const SomeParentScreen = () => {
  const navigation = useNavigation();
  return (
    <View style={{flex:1}}>
      <CompactMenu 
        dropdownMenuItems={[
          {
            name: "修改后的菜单项", 
            onPress: () => navigation.navigate('SomeScreen')
          }
        ]} 
      />
    </View>
  )
}

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