react-native - react 导航 v5 : Pass function as parameter to be used in headerRight button

Question

我想调用 headerRight 按钮点击屏幕上的函数。我在 useEffect 中将 func 作为参数传递，如下所示。

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) {
...
}

当我点击按钮时，它说:TypeError: Cannot read property '_confirmClick' of undefined

Answer 1

您不需要在标题上设置参数。您可以直接将该方法传递给 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是一些文档。