Type Script-React Native:将参数传递给NavigationDialog函数的正确方法

Question

将参数传递给NavigationDialog函数的正确方法是什么，以便它可以在我想要的任何地方使用？

在我的例子中，我试图传递参数，但我认为isVisible参数有问题。

import React, { useState } from 'react';
import { Popup } from 'react-native-map-link';
import styles from './NavigationDialogStyle';
const NavigationDialog = ({ latitude: number, longitude: number, isVisible: boolean }) => {
const [isVisible, setIsVisible] = useState(false);
const options = {
latitude: latitude,
longitude: longitude,
dialogTitle: 'open with',
dialogMessage: 'what app to use ?',
cancelText: 'close,
};
return (
<Popup
isVisible={isVisible}
onCancelPressed={() => setIsVisible(false)}
onAppPressed={() => setIsVisible(false)}
onBackButtonPressed={() => setIsVisible(false)}
modalProps={{
animationIn: 'slideInUp',
}}
appsWhiteList={['waze', 'google-maps']}
options={options}
style={{ container: styles.popupStyle }}
/>      
);
}
export default NavigationDialog;

Answer 1

您的组件应该只有一个参数，一个对象，通常称为props，除非您使用析构函数

const NavigationDialog = ({ latitude:number , longitude:number , isVisible:boolean }) {
...
}
// or
const NavigationDialog = (props) {
// Here you can use props.latitude, props.longitude, etc..
...
}

关于isVisible，您希望道具和状态具有相同的名称。如果希望NavigationDialog控制其自身的可见状态，或者父级控制其可见状态，则应在保持状态之间进行选择。通常在处理Dialog时，像按钮点击这样的事件会触发一个对话框，这意味着父级应该拥有可见状态，而不是NavigationDialog

编辑：以下评论

const Parent = () => {
const [isvisible, setIsVisible] = useState(false);
return <NavigationDialog isVisible={isVisible} setIsVisible={setIsVisible} />
}