React-navigation v5 : Pass function as parameter to be used in headerRight button

问题

I ham trying to call function on headerRight button click on screen. I am passing func as param in useEffect as shown below.

useEffect(() => {

    navigation.setParams({ _confirmClick: confirmNotification })

  }, [navigation])
    useLayoutEffect(() => {
        navigation.setOptions({
          headerRight: () => (
            <TouchableOpacity
              onPress={() => params._confirmClick('New') }
              style={[theme.marginRight15]}>
              <View style={[styles.sendNotificationButton,
              {
                backgroundColor: notification ? theme.colors.notificationDeleteButtonColor :
                  theme.colors.sendbuttonColor,
                borderColor: notification ? theme.colors.notificationDeleteButtonColor :
                  theme.colors.sendbuttonColor,
              }]}>
                <Ionicons name="ios-send" size={15}
                  style={theme.padding3}
                  color={theme.colors.whiteColor} />
              </View>
            </TouchableOpacity>
          ),
        });
      }, [navigation]);



  function confirmNotification(status) {
...
}

When I click on button it says : TypeError: Cannot read property '_confirmClick' of undefined

回答1:

You don't need to set parameter on header. You can directly pass that method to headerRight :

function yourScreenName({ navigation }) {
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity
          onPress={() => confirmNotification('New')}
          style={[theme.marginRight15]}>
          <View style={[styles.sendNotificationButton,
          {
            backgroundColor: notification ? theme.colors.notificationDeleteButtonColor :
              theme.colors.sendbuttonColor,
            borderColor: notification ? theme.colors.notificationDeleteButtonColor :
              theme.colors.sendbuttonColor,
          }]}>
            <Ionicons name="ios-send" size={15}
              style={theme.padding3}
              color={theme.colors.whiteColor} />
          </View>
        </TouchableOpacity>
      ),
    });
  }, [navigation, confirmNotification]); // pass method directly here
}

Here is some documentation.

来源：https://stackoverflow.com/questions/61606346/react-navigation-v5-pass-function-as-parameter-to-be-used-in-headerright-butto