如何将函数传递给导航（堆栈）组件

Question

所以我想将 savedLocationHandler() 函数传递给导航组件，这样我就可以将它放在 Header 按钮上，因为我想这是访问 header 的唯一方法，但我没有不知道该怎么做！我尝试了 setParams 但它没有用，我只知道路由方法，但我猜它只用于从一个屏幕到另一个屏幕？！

import React, { useCallback, useEffect, useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import MapView, { Marker } from "react-native-maps";

const MapScreen = ({ navigation }) => {
  const [selectedLocation, setSelectedLocation] = useState();
  const MapRegion = {
    latitude: 37.78,
    longitude: -122.43,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };
  const selectLocationHandler = (event) => {
    console.log(event);
    setSelectedLocation({
      lat: event.nativeEvent.coordinate.latitude,
      lng: event.nativeEvent.coordinate.longitude,
    });
  };
  let markerCoordinates;

  const savedLocationHandler = () => {
    if (!selectedLocation) {
      return;
    }
    navigation.navigate("NewPlaceScreen", {
      selectedLocation: selectedLocation,
    });
  };

  if (selectedLocation) {
    markerCoordinates = {
      latitude: selectedLocation.lat,
      longitude: selectedLocation.lng,
    };
  }

  return (
    <MapView
      style={styles.mapImage}
      region={MapRegion}
      onPress={selectLocationHandler}
    >
      {markerCoordinates && (
        <Marker title="Picked Location" coordinate={markerCoordinates}></Marker>
      )}
    </MapView>
  );
};

这是导航组件（只有我想传递函数的地方）

<Stack.Screen
          name="MapScreen"
          component={MapScreen}
          options={({ navigation }) => ({
            headerRight: () => (
              <TouchableOpacity
                onPress={() => { {/* i want to pass the function here*/ } 
                  saveFn;
                }}
                style={{ marginHorizontal: 20 }}
              >
                <Text
                  style={{
                    fontSize: 19,
                    fontWeight: "bold",
                    color: Platform.OS === "android" ? "#C06E00" : "white",
                  }}
                >
                  Save
                </Text>
              </TouchableOpacity>
            ),
          })}
        />
      </Stack.Navigator>

Answer 1

我们可以使用 useLayoutEffect 为任何屏幕提供 headerRight 道具的功能，如下所示。

const MapScreen = ({ navigation }) => {

...


useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => console.log("DO SOMETHING")
    })
}, [])

...

}

如何将函数传递给导航（堆栈）组件

How can i pass a function to the navigation ( stack ) component

navigation

routes

react-native

react-navigation