React Native：无需按钮触发，导航至Firebase OTP屏时能否直接调用函数？

当然可以实现，无需按钮触发，只要在屏幕挂载或获得焦点时自动执行目标函数即可。下面是基于React Navigation（React Native主流导航库）的两种常见实现方案：

函数组件（React Navigation 5+ 推荐） #

使用useFocusEffect钩子监听屏幕聚焦状态，配合状态变量控制只在首次导航时执行一次函数：

import { useFocusEffect } from '@react-navigation/native';
import React, { useState, useCallback } from 'react';
import { View, TextInput, Alert } from 'react-native';
import auth from '@react-native-firebase/auth';

const OTPVerificationScreen = ({ route }) => {
  const [otpCode, setOtpCode] = useState('');
  const [isFirstLoad, setIsFirstLoad] = useState(true);

  // Firebase OTP验证核心函数
  const verifyOTP = async () => {
    try {
      const { verificationId } = route.params;
      // 如果需要自动填充OTP，可以在此处先通过短信读取API获取验证码再赋值
      const credential = auth.PhoneAuthProvider.credential(verificationId, otpCode);
      await auth().signInWithCredential(credential);
      console.log('OTP验证成功');
      // 验证成功后的跳转或状态更新逻辑
    } catch (error) {
      console.error('OTP验证失败:', error.message);
      Alert.alert('验证失败', error.message);
    }
  };

  // 首次进入屏幕时执行验证
  useFocusEffect(
    useCallback(() => {
      if (isFirstLoad) {
        verifyOTP();
        setIsFirstLoad(false);
      }
    }, [isFirstLoad])
  );

  return (
    <View>
      <TextInput
        value={otpCode}
        onChangeText={setOtpCode}
        placeholder="输入OTP"
        keyboardType="numeric"
        maxLength={6}
      />
      {/* 可选：保留手动验证按钮作为自动验证的 fallback */}
      {/* <TouchableOpacity onPress={verifyOTP} style={{ marginTop: 20 }}>
        <Text>手动验证</Text>
      </TouchableOpacity> */}
    </View>
  );
};

export default OTPVerificationScreen;

说明 #

• useFocusEffect会在屏幕每次获得焦点时触发，isFirstLoad状态确保函数仅在首次导航时执行；若需要每次回到该屏幕都执行，去掉状态判断即可。
• 导航到该屏幕时，务必传递verificationId参数（示例：navigation.navigate('OTPVerification', { verificationId })）。

类组件（兼容旧代码） #

如果项目仍使用类组件，可通过componentDidMount或NavigationEvents实现：

import React, { Component } from 'react';
import { View, TextInput, Alert } from 'react-native';
import { NavigationEvents } from 'react-navigation';
import auth from '@react-native-firebase/auth';

class OTPVerificationScreen extends Component {
  state = {
    otpCode: '',
    isFirstLoad: true
  };

  verifyOTP = async () => {
    try {
      const { verificationId } = this.props.route.params;
      const credential = auth.PhoneAuthProvider.credential(verificationId, this.state.otpCode);
      await auth().signInWithCredential(credential);
      console.log('OTP验证成功');
    } catch (error) {
      console.error('OTP验证失败:', error.message);
      Alert.alert('验证失败', error.message);
    }
  };

  componentDidMount() {
    // 组件挂载时执行一次验证
    this.verifyOTP();
    this.setState({ isFirstLoad: false });
  }

  render() {
    return (
      <View>
        <TextInput
          value={this.state.otpCode}
          onChangeText={(text) => this.setState({ otpCode: text })}
          placeholder="输入OTP"
          keyboardType="numeric"
          maxLength={6}
        />
        {/* 可选：监听屏幕聚焦事件，用于重复验证场景 */}
        <NavigationEvents
          onWillFocus={() => {
            if (!this.state.isFirstLoad) {
              // 每次聚焦都执行的逻辑
            }
          }}
        />
      </View>
    );
  }
}

export default OTPVerificationScreen;

注意事项 #

• 若要实现OTP自动填充，可结合React Native的短信读取API（Android用SMSRetriever，iOS用CoreTelephony）获取验证码后，自动赋值给输入框再调用验证函数。
• 异步操作必须做好错误处理，避免因网络波动、无效验证码等情况导致程序崩溃。

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