SwiftUI项目接入Twilio实现手机号验证 现有UIKit示例无法适配怎么办

现有VerifyAPI封装无需改动可直接复用，只需要实现对应SwiftUI视图即可，完整实现代码如下：

import SwiftUI

struct PhoneVerificationView: View {
    // 存储输入框内容
    @State private var countryCode: String = ""
    @State private var phoneNumber: String = ""
    
    var body: some View {
        VStack(spacing: 24) {
            TextField("国家码（例：86）", text: $countryCode)
                .keyboardType(.numberPad)
                .textFieldStyle(.roundedBorder)
                .padding(.horizontal)
            
            TextField("手机号码", text: $phoneNumber)
                .keyboardType(.phonePad)
                .textFieldStyle(.roundedBorder)
                .padding(.horizontal)
            
            Button {
                guard !countryCode.isEmpty, !phoneNumber.isEmpty else {
                    // 可自行添加空输入提示
                    return
                }
                // 调用原有验证接口
                VerifyAPI.sendVerificationCode(countryCode, phoneNumber)
                // 可自行添加发送后的提示或页面跳转逻辑
            } label: {
                Text("发送验证码")
                    .foregroundColor(.white)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 14)
                    .background(.blue)
                    .cornerRadius(10)
            }
            .padding(.horizontal)
        }
        .navigationTitle("手机号验证")
    }
}

可选优化方案 #

• 若需要处理接口请求结果，可修改VerifyAPI增加回调参数：

struct VerifyAPI {
    static func sendVerificationCode(
        _ countryCode: String,
        _ phoneNumber: String,
        completion: @escaping (Bool, Any?) -> Void
    ) {
        let parameters = [
            "via": "sms",
            "country_code": countryCode,
            "phone_number": phoneNumber
        ]
        
        RequestHelper.createRequest("start", parameters) { json in
            // 根据实际业务逻辑判断请求是否成功
            let isSuccess = true // 此处替换为实际返回的成功状态判断
            completion(isSuccess, json)
            return .success(DataResult(data: json))
        }
    }
}

修改后按钮的调用逻辑可调整为：

VerifyAPI.sendVerificationCode(countryCode, phoneNumber) { isSuccess, result in
    if isSuccess {
        // 发送成功，跳转至验证码填写页面
    } else {
        // 发送失败，弹出错误提示
    }
}

• 可自行添加输入内容正则校验，避免无效内容提交
• 可给按钮增加点击防抖逻辑，避免用户重复触发多次请求

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