探索React Native Login：构建现代移动应用的新范式

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
 
export default function LoginScreen() {
  const [userName, setUserName] = useState('');
 
  const handleLogin = () => {
    // 这里应该是登录逻辑，例如调用API验证用户名和密码
    console.log('登录用户名:', userName);
    // ...登录逻辑
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login Screen</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your username"
        value={userName}
        onChangeText={setUserName}
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    margin: 10,
  },
  input: {
    height: 40,
    width: '100%',
    borderColor: 'gray',
    borderWidth: 1,
    margin: 10,
    padding: 5,
  },
});

这个代码实例展示了如何在React Native应用中创建一个简单的登录界面，并使用useState钩子来管理用户名的状态。用户可以输入他们的用户名，并通过点击按钮触发登录逻辑。这个例子教会开发者如何在React Native中处理表单输入和按钮点击事件。