您可以创建自己的自定义钩子并将其提取到自己的文件中

function useAuth() {
  const [loading, setLoading] = useState(false);

  async function signIn() {
    setLoading(true);
    const { error } = await supabase.auth.signInWithOtp({
      email: email,
    });

    if (error) {
      console.log(error);
      setLoading(false);
    } else {
      setLoading(false);
      navigation.navigate('VerifyOtp', { email: userEmail });
    }
  }

  return [loading, signIn];
}

可以像在另一个答案中那样传递callback，但我更喜欢用另一种方式：

function useSignIn() {
  const [loading, setLoading] = useState(false);

  const handleSignIn = useCallback(async (email: string) => {
    setLoading(true);

    const { error } = await supabase.auth.signInWithOtp({
      email: email,
    });

    if (error) {
      console.log(error);
      setLoading(false);
    } else {
      setLoading(false);
      navigation.navigate('VerifyOtp', { email: userEmail });
    }
  }, [setLoading]);

  return [loading, handleSignIn];
}

顺便说一下，我不确定{ email: userEmail }是什么。userEmail是打印错误（应该是email）还是某个全局变量或来自另一个钩子？它应该在useMemo deps中以某种方式处理。

最直接的方法是依赖注入。

export const handleSignInFactory = (setLoading) => {
  const handleSignIn = async (email: string) => {
    setLoading(true);
    const { error } = await supabase.auth.signInWithOtp({
      email: email,
    });

    if (error) {
      console.log(error);
      setLoading(false);
    } else {
      setLoading(false);
      navigation.navigate('VerifyOtp', { email: userEmail });
    }
  };

  return handleSignIn;
}

现在在React组件中：

function MyComp(props) {
  const [loading, setLoading] = useState(false);
  const handleSignIn = handleSignInFactory(setLoading);
  // ...
  return <button onClick={handleSignIn}>Sign In</button>;
}