如何判断Expo Router中newmeal页面的headerRight按钮是否被点击？

我想判断headerRight按钮是否被点击，并在newmeal.js组件中获取该点击状态。

_layout.js 代码 #

import { Stack } from "expo-router";
import { useCallback } from "react";
import { useFonts } from "expo-font";
import * as SplashScreen from 'expo-splash-screen';
import { COLORS } from "../constants/colors";
import { Text, TouchableOpacity, View } from "react-native";
import NewMeal from "./newmeal";

SplashScreen.preventAutoHideAsync();

const Layout = () => {
  const [fontsLoaded] = useFonts({
    SFProDisplay: require('../assets/fonts/SF-Pro-Display-Black.otf')
  })

  const onLayoutRoutView = useCallback(async () => {
    if(fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if(!fontsLoaded) return null;

  return (
    <Stack onLayout={onLayoutRoutView} >
      <Stack.Screen 
        // 其他页面代码
      />
      <Stack.Screen 
         // 其他页面代码
      />
      <Stack.Screen 
        name="newmeal"
        options={{
          presentation: 'modal',
          headerStyle: {
            backgroundColor: COLORS.box1,
          },
          headerTitleStyle: {
            color: "#FFF"
          },
          headerTitle: "New meal"
        }}
      />
    </Stack>
  )
}

export default Layout;

newmeal.js 修改后代码 #

import { SafeAreaView, View, Text, TouchableOpacity } from "react-native"
import { COLORS } from "../constants/colors";
import { useNavigation } from "expo-router";
import { useState, useEffect } from "react";

const NewMeal = () => {
  const navigation = useNavigation();
  // 记录Done按钮的点击状态
  const [isDoneClicked, setIsDoneClicked] = useState(false);

  useEffect(() => {
    // 组件挂载后动态设置header按钮的交互逻辑
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity 
          onPress={() => {
            setIsDoneClicked(true);
            // 可在此添加点击后的其他逻辑，比如提交数据、关闭模态框
            // navigation.goBack();
          }}
        >
          <Text style={{ color: COLORS.blue, fontSize: 17, fontWeight: 'bold' }}>Done</Text>
        </TouchableOpacity>
      ),
      headerLeft: () => (
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Text style={{ color: COLORS.blue, fontSize: 17  }}>Cancel</Text>
        </TouchableOpacity>
      )
    });
  }, [navigation]);

  // 组件内可直接使用isDoneClicked状态执行后续逻辑
  return(
    <SafeAreaView style={{ 
      flex: 1, 
      backgroundColor: COLORS.background,
    }}>
      {isDoneClicked && <Text style={{ color: '#000', marginTop: 20, paddingHorizontal: 20 }}>Done按钮已被点击</Text>}
      {/* 其他页面内容 */}
    </SafeAreaView>
  )
}

export default NewMeal;

实现说明 #

• 将header按钮的交互逻辑移到NewMeal组件内部，通过useNavigation的setOptions方法动态绑定点击事件
• 组件内部通过状态isDoneClicked记录按钮点击状态，点击Done按钮时直接更新该状态
• 可根据isDoneClicked的值执行表单验证、数据提交等后续业务逻辑

内容的提问来源于stack exchange，提问作者Thomas Rooskens