React Native中OTP验证正确却无法跳转，始终提示无效OTP求助

问题根源 #

你代码中的核心错误是**Redirect函数内的otp_code变量未关联用户输入的OTP状态**：

• 你在Redirect里定义了var otp_code;但未赋值，这个变量始终是undefined
• 每次校验时都是拿undefined和"123456"比较，自然永远触发"Invalid OTP"提示

修复代码 #

直接使用组件中维护的otp状态进行校验，同时可以增加输入为空的判断优化用户体验：

import { StyleSheet, Text, View, Image, Alert, TouchableOpacity, TextInput } from "react-native";
import React , {useState} from "react";
import { useNavigation } from "@react-navigation/native";


const VerifyNumber2 = () => {

  const navigation = useNavigation();
  const [otp, setOtp] = useState("");

  const Redirect = () =>{
    // 先判断是否输入了内容
    if (!otp.trim()) {
      Alert.alert('请输入OTP验证码');
      return;
    }
    // 直接使用组件状态otp进行校验
    if (otp ==="123456"){
      navigation.navigate('Profile');
    }else{
      Alert.alert('Invalid OTP');
    }
  }

  return (
    <View style={styles.container}>
      <Image
        style={{ width: 61, height: 61, top: 48, left: 177 }}
        source={require("../assets/*.png")}
      />
      <Text style={styles.hometext}>Verify your Phone Number</Text>
      <Text style={styles.hometext2}>* will need to verify your PhoneNumber</Text>

      <View style={{flexDirection :'row', alignItems : 'center', justifyContent :'space-evenly', paddingHorizontal:8}}>
      <TextInput
      value={otp}
        placeholder = "Enter OTP"
        onChangeText={(otp) => setOtp(otp)}
        style={styles.input}
        maxLength={6} // 改为6位，匹配验证码长度
        keyboardType="numeric" // 弹出数字键盘，优化输入体验
    />

  </View>

    <View>
    <TouchableOpacity onPress={Redirect}>  {/* 简化写法，无需额外箭头函数 */}
        <View style={styles.button}>  
        <Text style={styles.buttonText}>Next</Text>  
        </View>  
      </TouchableOpacity>  
    </View>
      
    </View>
  );
};

export default VerifyNumber2;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    width: "100%",
    height: "100%",
  },
  hometext:{
    marginTop : 80,
    textAlign : 'center',
    fontWeight : 'bold',
    fontSize : 20
  },
  hometext2:{
    flexShrink : 1,
    marginTop : 10,
    flexWrap : "wrap",
    textAlign : 'center',
    fontWeight : 400
  },
  button:{
    width : 282,
    height : 41,
    top : 120,
    left : 66,
    borderRadius : 10,
    backgroundColor : '#400080'
  },
  buttonText:{
    fontWeight : "bold",
    color : '#FFFF',
    textAlign : 'center',
    top : 10
  },
  input:{
    marginTop : 50,
    padding: 5,
    backgroundColor : '#D9D9D957',
    width : 282,
    height : 46,
    borderRadius : 10
  }
});

额外优化点 #

1. 移除了未使用的useMemo和Picker导入，减少冗余代码
2. 将TextInput的maxLength改为6，匹配你的6位验证码长度
3. 添加keyboardType="numeric"，让用户输入时弹出数字键盘，更符合OTP使用场景
4. 简化了TouchableOpacity的onPress写法，直接传入Redirect函数即可

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