iOS自动读取OTP方案咨询 React Native跨平台短信验证需求

嘿，针对你提出的两个问题，我整理了实际开发中常用的解决方案：

iOS原生自带了短信OTP自动填充的能力，不用额外写复杂代码就能实现，核心要点有两个：

• 短信格式规范：你的验证码短信需要包含明确的标识，比如“验证码：123456”或者“OTP: 654321”，最好加上“用于XX应用”的描述，帮助iOS系统精准识别这是当前APP的验证码。
• React Native组件配置：给接收验证码的TextInput设置textContentType="oneTimeCode"属性，系统就会自动弹出填充提示。示例代码：

import { TextInput } from 'react-native';

<TextInput
  placeholder="请输入验证码"
  textContentType="oneTimeCode"
  keyboardType="number-pad"
  autoCapitalize="none"
/>

另外，iOS 12+还支持通过Universal Links关联APP和短信，但大部分场景下，上面的基础配置已经足够满足需求了。

既然react-native-sms-android只支持安卓，这里给你几个靠谱的替代方案：

跨平台首选：react-native-otp-verify #

这个库不仅能读取OTP，还支持跨平台发送短信（iOS端会跳转系统短信APP），步骤如下：

1. 安装依赖：npm install react-native-otp-verify --save
2. iOS端需要在Info.plist里添加权限描述：

<key>NSContactsUsageDescription</key>
<string>需要访问联系人以选择收件人</string>

3. 发送短信的示例代码：

import RNOtpVerify from 'react-native-otp-verify';

const sendVerificationSMS = async (phoneNumber, otpCode) => {
  try {
    const smsContent = `你的验证码是：${otpCode}，请勿向他人泄露`;
    await RNOtpVerify.sendSMS(phoneNumber, smsContent);
    console.log("短信发送界面已打开");
  } catch (error) {
    console.error("发送失败：", error.message);
  }
};

仅iOS原生实现（无第三方库） #

如果只想针对iOS做定制化开发，可以直接调用原生的MFMessageComposeViewController：

1. 在iOS原生代码中创建一个React Native模块（比如SMSManager）：

#import <React/RCTBridgeModule.h>
#import <MessageUI/MessageUI.h>

@interface SMSManager : NSObject <RCTBridgeModule, MFMessageComposeViewControllerDelegate>
@end

@implementation SMSManager

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(sendSMS:(NSString *)phoneNumber message:(NSString *)message resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
  if (![MFMessageComposeViewController canSendText]) {
    reject(@"UNSUPPORTED", @"当前设备不支持发送短信", nil);
    return;
  }
  
  MFMessageComposeViewController *smsVC = [[MFMessageComposeViewController alloc] init];
  smsVC.recipients = @[phoneNumber];
  smsVC.body = message;
  smsVC.messageComposeDelegate = self;
  
  UIViewController *rootVC = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
  [rootVC presentViewController:smsVC animated:YES completion:nil];
  
  resolve(@"已打开短信发送界面");
}

- (void)messageComposeViewController:(MFMessageComposeViewController *)controller didFinishWithResult:(MessageComposeResult)result {
  [controller dismissViewControllerAnimated:YES completion:nil];
}

@end

2. 在React Native中调用这个原生模块：

import { NativeModules } from 'react-native';
const { SMSManager } = NativeModules;

const sendOTP = async () => {
  try {
    await SMSManager.sendSMS('138xxxxxxx', '你的验证码是123456');
  } catch (error) {
    console.error(error);
  }
};

Expo开发者专属方案 #

如果你用的是Expo框架，直接用expo-sms就能快速实现跨平台短信发送：

import * as SMS from 'expo-sms';

const sendVerificationCode = async () => {
  const isSMSAvailable = await SMS.isAvailableAsync();
  if (!isSMSAvailable) {
    alert("当前设备不支持发送短信");
    return;
  }
  
  const sendResult = await SMS.sendSMSAsync(
    ['138xxxxxxx'],
    '你的验证码是：123456，有效时间5分钟'
  );
  console.log("发送结果：", sendResult.result);
};

内容的提问来源于stack exchange，提问作者Masuk Helal Anik