You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React Native Expo项目实现Android/iOS双平台短信验证码方案求助

兼容Expo的跨平台短信OTP发送解决方案

我刚好处理过类似的Expo项目短信发送需求,结合你的情况,给你两个靠谱的方案,完美覆盖Android和iOS平台:

方案1:用Expo官方SMS模块(快速实现)

Expo自带的expo-sms是专门为Expo生态适配的模块,不用操心原生配置,直接就能用,支持双平台。

操作步骤:

  1. 先安装依赖:
npx expo install expo-sms
  1. 调用示例代码:
import React from 'react';
import { View, Button, Alert } from 'react-native';
import * as SMS from 'expo-sms';

export default function OTPComponent() {
  const sendOTP = async () => {
    // 先检查设备是否支持短信功能
    const isSMSAvailable = await SMS.isAvailableAsync();
    if (!isSMSAvailable) {
      Alert.alert('提示', '当前设备不支持短信发送');
      return;
    }

    // 发送短信
    const sendResult = await SMS.sendSMSAsync(
      ['目标手机号'], // 可传入多个号码数组
      `你的验证码是:${Math.floor(100000 + Math.random() * 900000)}`
    );

    // 处理发送结果
    if (sendResult.result === SMS.SmsResult.SENT) {
      Alert.alert('成功', '验证码已发送');
    } else {
      Alert.alert('失败', '短信发送被取消或失败');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="发送验证码" onPress={sendOTP} />
    </View>
  );
}
  1. iOS额外配置:
    app.json里添加短信权限说明,不然审核会被拒:
{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSMessagesUsageDescription": "需要发送短信验证码以完成身份验证"
      }
    }
  }
}

方案2:后端调用第三方短信服务(生产环境推荐)

如果是正式项目,更推荐用这种方式——客户端只负责收集手机号,后端调用第三方服务商(比如Twilio、国内的阿里云/腾讯云短信)发送OTP。

优势:

  • 客户端不用申请短信权限,避免权限弹窗的用户体验问题
  • OTP生成、验证全在后端,更安全,防止客户端篡改
  • 支持全球手机号,兼容性比客户端直接发送更好

实现思路:

  1. 前端把用户手机号传给你的后端接口
  2. 后端调用短信服务商API发送OTP,同时把OTP存到Redis/数据库(设置过期时间,比如5分钟)
  3. 前端接收后端返回的发送状态,引导用户输入验证码,再把验证码传给后端验证

后端示例(Node.js + Twilio):

const twilio = require('twilio');
const client = twilio('你的Twilio Account SID', '你的Twilio Auth Token');
const redis = require('redis');
const redisClient = redis.createClient();

app.post('/send-otp', async (req, res) => {
  const { phoneNumber } = req.body;
  const otp = Math.floor(100000 + Math.random() * 900000).toString();

  try {
    // 调用Twilio发送短信
    await client.messages.create({
      body: `你的验证码是:${otp},5分钟内有效`,
      from: '你的Twilio手机号',
      to: phoneNumber
    });

    // OTP存到Redis,5分钟过期
    await redisClient.setEx(`otp:${phoneNumber}`, 300, otp);
    
    res.status(200).json({ success: true, message: '验证码已发送' });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, message: '发送失败,请稍后重试' });
  }
});

为什么之前的包在Expo里失效?

你之前用的react-native-sms-androidreact-native-send-sms都是纯React Native原生模块,而Expo的managed workflow(默认模式)不允许直接使用未经过Expo适配的原生模块——除非你eject到bare workflow,但那样会丢掉Expo的便捷性。所以必须用Expo官方支持的模块,或者后端调用的方式。

内容的提问来源于stack exchange,提问作者Debadrita Bose

火山引擎 最新活动