React Native 登录页--验证码

以下是一个简单的React Native登录页面，包含获取验证码和登录功能的示例代码：

import React, { useState } from 'react';
import { View, Text, TextInput, Button, ToastAndroid } from 'react-native';
 
const LoginScreen = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
 
  const getVerificationCode = () => {
    // 模拟发送验证码的逻辑
    ToastAndroid.show(`发送到 ${phoneNumber} 的验证码是 123456`, ToastAndroid.SHORT);
  };
 
  const login = () => {
    // 模拟登录逻辑
    if (verificationCode === '123456') {
      ToastAndroid.show('登录成功', ToastAndroid.SHORT);
      // 登录成功后的代码
    } else {
      ToastAndroid.show('验证码错误', ToastAndroid.SHORT);
    }
  };
 
  return (
    <View>
      <TextInput
        placeholder="手机号码"
        keyboardType="phone-pad"
        onChangeText={(text) => setPhoneNumber(text)}
      />
      <Button title="获取验证码" onPress={getVerificationCode} />
      <TextInput
        placeholder="验证码"
        keyboardType="number-pad"
        onChangeText={(text) => setVerificationCode(text)}
      />
      <Button title="登录" onPress={login} />
    </View>
  );
};
 
export default LoginScreen;

这段代码提供了一个简单的登录界面，用户可以输入手机号码，点击按钮获取验证码，然后输入验证码并点击登录按钮尝试登录。登录时，如果验证码正确，会显示登录成功的提示，如果错误，则显示验证码错误的提示。这个例子主要用于演示React Native界面的构建和简单的用户交互。