如何从 React Native 中的另一个组件调用登录函数

Question

所以我的逻辑是用于身份验证，我需要创建一个保留所有函数和敏感详细信息的组件，然后我应该使用钩子在登录表单中调用这些函数，获取访问令牌等。如果这不正确，请纠正我方法。 但是，我无法完成这项工作，因为当我运行应用程序时，函数未定义。

错误：setEmail、setPassword、signInWithEmail、signUpWithEmail未定义。

App.js

import { StyleSheet, View } from 'react-native';
import { Button, Input } from 'react-native-elements';
import authService from './component/authService';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.container}>
      <View style={[styles.verticallySpaced, styles.mt20]}>
        <Input
          label="Email"
          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
          onChangeText={(text) => authService.setEmail(text)}
          value={email}
          placeholder="[email protected]"
          autoCapitalize={'none'}
        />
      </View>
      <View style={styles.verticallySpaced}>
        <Input
          label="Password"
          leftIcon={{ type: 'font-awesome', name: 'lock' }}
          onChangeText={(text) => authService.setPassword(text)}
          value={password}
          secureTextEntry={true}
          placeholder="Password"
          autoCapitalize={'none'}
        />
      </View>
      <View style={[styles.verticallySpaced, styles.mt20]}>
        <Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />
      </View>
      <View style={styles.verticallySpaced}>
        <Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />
      </View>
    </View>
    </View>
  );
}

authService.tsx

import React, { useState } from "react";
import { supabase } from '../lib/supabase';
import { Alert } from 'react-native';

export default function AuthService() {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [loading, setLoading] = useState(false)
    
    async function signInWithEmail() {
        setLoading(true)
        const { error } = await supabase.auth.signInWithPassword({
          email: email,
          password: password,
        })
    
        if (error) Alert.alert(error.message)
        setLoading(false)
    }
    
    async function signUpWithEmail() {
        setLoading(true)
        const {
            data: { session },
            error,
        } = await supabase.auth.signUp({
            email: email,
            password: password,
        })

        if (error) Alert.alert(error.message)
        if (!session) Alert.alert('Please check your inbox for email verification!')
        setLoading(false)
    }
}

Answer 1

您可以使用

react-native-event-listeners

来触发其他组件上的函数，并且您也可以从该侦听器中获取值。

事件监听器还可以跨不同的文件工作。您只需在发送或接收事件所需的每个文件中导入 EventRegister。

这是例子

您应该通过从 npm 安装 if 来导入列表器。

import {EventRegister} from 'react-native-event-listeners';

你可以这样触发功能 refreshTBD 是一个键，您可以在此处添加任何键

 onPress={() => EventRegister.emit('refreshTBD')}

这是当我们想要通过emitting击中时击中的函数。 刷新待定是关键。

 React.useEffect(() => {
   const Listener = EventRegister.addEventListener('refreshTBD', () => {
    // Do whatever you want to do here. You can also call a function here like onClick()
   });
   return () => {
     EventRegister.removeAllListeners(Listener);
   };
 }, []);

有关更多详细信息，您可以访问react-native-event-listeners