React Native Expo项目实现Android/iOS双平台短信验证码方案求助
兼容Expo的跨平台短信OTP发送解决方案
我刚好处理过类似的Expo项目短信发送需求,结合你的情况,给你两个靠谱的方案,完美覆盖Android和iOS平台:
方案1:用Expo官方SMS模块(快速实现)
Expo自带的expo-sms是专门为Expo生态适配的模块,不用操心原生配置,直接就能用,支持双平台。
操作步骤:
- 先安装依赖:
npx expo install expo-sms
- 调用示例代码:
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> ); }
- iOS额外配置:
在app.json里添加短信权限说明,不然审核会被拒:
{ "expo": { "ios": { "infoPlist": { "NSMessagesUsageDescription": "需要发送短信验证码以完成身份验证" } } } }
方案2:后端调用第三方短信服务(生产环境推荐)
如果是正式项目,更推荐用这种方式——客户端只负责收集手机号,后端调用第三方服务商(比如Twilio、国内的阿里云/腾讯云短信)发送OTP。
优势:
- 客户端不用申请短信权限,避免权限弹窗的用户体验问题
- OTP生成、验证全在后端,更安全,防止客户端篡改
- 支持全球手机号,兼容性比客户端直接发送更好
实现思路:
- 前端把用户手机号传给你的后端接口
- 后端调用短信服务商API发送OTP,同时把OTP存到Redis/数据库(设置过期时间,比如5分钟)
- 前端接收后端返回的发送状态,引导用户输入验证码,再把验证码传给后端验证
后端示例(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-android和react-native-send-sms都是纯React Native原生模块,而Expo的managed workflow(默认模式)不允许直接使用未经过Expo适配的原生模块——除非你eject到bare workflow,但那样会丢掉Expo的便捷性。所以必须用Expo官方支持的模块,或者后端调用的方式。
内容的提问来源于stack exchange,提问作者Debadrita Bose




