TypeScript-React Native：如何正确向NavigationDialog函数传递参数

你的代码里isVisible参数的问题核心是内部状态与props重名冲突，再加上props类型定义错误、语法疏漏，导致组件无法被外部正确控制。下面是具体修复方案：

1. 修复props类型定义的语法错误 #

原代码的TypeScript类型声明写法有误，正确的解构+类型声明方式应该是：

const NavigationDialog = ({ latitude, longitude, isVisible, onClose }: {
  latitude: number;
  longitude: number;
  isVisible: boolean;
  onClose: () => void;
}) => {
  // ...组件逻辑
}

2. 移除内部冲突的isVisible状态，改为受控组件 #

你内部声明的useState(isVisible)会覆盖外部传入的props值，导致父组件无法控制弹窗显示。要让组件通用，应该做成受控组件：由父组件传入isVisible控制显示状态，传入onClose回调处理关闭逻辑，组件内部不再维护独立状态。

3. 修复options里的语法疏漏 #

cancelText: 'close, 缺少闭合单引号，应改为cancelText: 'close',

完整修复后的代码 #

import React from 'react';
import { Popup } from 'react-native-map-link';
import styles from './NavigationDialogStyle';

const NavigationDialog = ({ latitude, longitude, isVisible, onClose }: {
  latitude: number;
  longitude: number;
  isVisible: boolean;
  onClose: () => void;
}) => {
  const options = {
    latitude,
    longitude,
    dialogTitle: '打开方式',
    dialogMessage: '选择导航应用',
    cancelText: '关闭',
  };

  return (
    <Popup
      isVisible={isVisible}
      onCancelPressed={onClose}
      onAppPressed={onClose}
      onBackButtonPressed={onClose}
      modalProps={{
        animationIn: 'slideInUp',
      }}
      appsWhiteList={['waze', 'google-maps']}
      options={options}
      style={{ container: styles.popupStyle }}
    />
  );
};

export default NavigationDialog;

父组件调用示例 #

现在你可以在任意场景中使用这个组件，完全由父组件控制它的显示与隐藏：

import React, { useState } from 'react';
import { Button } from 'react-native';
import NavigationDialog from './NavigationDialog';

const ParentComponent = () => {
  const [showNavDialog, setShowNavDialog] = useState(false);
  const targetCoords = {
    latitude: 39.9042,
    longitude: 116.4074,
  };

  return (
    <>
      <Button
        title="打开导航选择弹窗"
        onPress={() => setShowNavDialog(true)}
      />
      <NavigationDialog
        latitude={targetCoords.latitude}
        longitude={targetCoords.longitude}
        isVisible={showNavDialog}
        onClose={() => setShowNavDialog(false)}
      />
    </>
  );
};

export default ParentComponent;

额外说明 #

如果需要组件同时支持受控和非受控模式（比如允许内部默认维护状态），可以增加兼容逻辑，但通用场景下优先使用受控组件，逻辑更清晰，适配性更强。

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