从navigationOptions

如何解决从navigationOptions

我想从导航栏中访问组件内部的参数。 具体来说，我想通过NavigationOptions从导航栏中访问“ changeModal”。

所以我的主要目标是：

• 操作：点击右上角的“三个点”按钮

• 结果：

  1. modalOpen设置为True
  2. 显示模式

我添加了屏幕外观的图片

下面是我的代码

import React,{ Component,useState } from "react";
import { View,Text,StyleSheet,Dimensions,Modal } from "react-native";
import { Button } from "react-native-elements";
import CreateNewWorkoutMenuScreen from "./CreateNewWorkoutMenuScreen";
import BackGround from "../components/BackGround";

const SCREEN_WIDTH = Dimensions.get("window").width;
const BUTTON_WIDTH = SCREEN_WIDTH * 0.3;

const PickedExercisesScreen = ({navigation}) => {
  const [modalOpen,setModalOpen] = useState(false);
   

  const changeModal = () => {
    setModalOpen(false);
    
  };

  return (
     <BackGround>
      <View style={styles.container}>
        <Text style={styles.welcome}>
          THIS IS THE WINDOW THAT SHOWS THE EXERCISES YOU HAVED PICKED!
        </Text>
        <Button title="turn on Modal" onPress={() => setModalOpen(true)} />
        <Modal animationType="fade" transparent={true} visible={modalOpen}>
          <CreateNewWorkoutMenuScreen callBack={changeModal} navigation={navigation} />
        </Modal>
      </View>
    </BackGround>
  );
};
var styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: "center",alignItems: "center",backgroundColor: "transparent",},welcome: {
    fontSize: 20,textAlign: "center",margin: 10,});

PickedExercisesScreen.navigationOptions = (screenProps) => ({
  title: "",headerStyle: {
    backgroundColor: "#000c23",shadowRadius: 0,shadowOffset: {
      height: 0,headerRight: () => (
    <Button //RIGHT BUTTON
      title="  . . .     "
      buttonStyle={{ width: BUTTON_WIDTH,backgroundColor: "#000c23" }}
      textStyle={{ color: "white",fontSize: 100,fontWeight: "bold" }}
      onPress={() => {
        console.log("3 buttons presses");
        console.log('screenProps.state:  ',screenProps.state)
        // console.log('props:  ',props)
      }}
    />
  ),headerLeft: () => (
    <Button // LEFT BUTTON
      title="  + New"
      textStyle={{ color: "white",fontWeight: "bold" }}
      buttonStyle={{ backgroundColor: "#000c23",width: BUTTON_WIDTH }}
      onPress={() => {
        setModalOpen(true);
      }}
    />
  ),});

export default PickedExercisesScreen;