Reactjs 使用onPress调用组件时钩子的使用无效

当我点击标题中的按钮时，我正在尝试使用modals

假设我有此组件列表，并且该列表正在使用自定义导航选项：

import { CustomModal } from './components/Modal';

const List = (props) => {
  const [enteredUrl, setEnteredUrl] = useState('');

  const urlInputHandler = (enteredUrl) => {
    setEnteredUrl(enteredUrl);
  };

  const addUrlHander = () => {
    console.log(enteredUrl);
  }

  return (
    <View></View>
  );
};

List.navigationOptions = (navData) => {
  return {
    headerTitle: 'Workouts',
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title='Add'
          iconName='md-add'
          onPress={() => {
            CustomModal(); //here is the modal
          }}
        />
      </HeaderButtons>
    ),
    headerBackTitle: null
  };
};

从“/components/Modal”导入{CustomModal}；
常量列表=（道具）=>{
const[enteredUrl，setEnteredUrl]=useState（“”）；
常量urlInputHandler=（输入URL）=>{
设置enteredUrl（enteredUrl）；
};
常量addUrlHander=（）=>{
控制台日志（enteredUrl）；
}
返回(
);
};
List.navigationOptions=（navData）=>{
返回{
标题：“运动”，
头灯：(
{
CustomModal（）；//这是模态
}}
/>
),
headerBackTitle:空
};
};

我的模态组件具有以下特性：

export const CustomModal = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  console.log(props);
  return (
    <Modal
      animationType='slide'
      transparent={false}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
      }}
    >
      <View style={{ marginTop: 22 }}>
        <View>
          <Text>Hello World!</Text>

          <TouchableHighlight
            onPress={() => {
              setModalVisible(!modalVisible);
            }}
          >
            <Text>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  );
}

export const CustomModal=（道具）=>{
const[modalVisible，setModalVisible]=使用状态（false）；
控制台日志（道具）；
返回(
{
警报。警报（'模式已关闭'）；
}}
>
你好，世界！
{
setModalVisible（！modalVisible）；
}}
>
隐藏模态
);
}

---

但是它给了我一个无效的钩子错误。为什么我的onPress在导航选项中给了我这个？我做错了吗？

onPress

是一个回调，不能将组件放入其中。也许你想要的是这样的：

模态函数看起来像

export const CustomModal=（道具）=>{
const[modalVisible，setModalVisible]=使用状态（false）；
控制台日志（道具）；
返回modalVisible(
{
警报。警报（'模式已关闭'）；
}}
>
你好，世界！
{
setModalVisible（！modalVisible）；
}}
>
隐藏模态
):(
setModalVisible（！modalVisible）}
/>
);
}

但是你导出的是CustomModal而不是Modal？哎呀，当我写这个问题的时候，我脑子里想的太多了，但实际上我答对了。谢谢，这帮了我的忙。然而，这给了我一个错误，因为HeaderButtons是第三方组件，需要组件。所以我必须把组件也放到CustomModal组件中。