react native登录页面
时间: 2023-09-06 12:11:02 浏览: 66
以下是一个简单的React Native登录页面的示例代码:
```javascript
import React, { useState } from 'react';
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
const LoginScreen = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleLogin = () => {
// 在这里添加处理登录逻辑的代码
};
return (
<View style={styles.container}>
<Text style={styles.title}>登录</Text>
<TextInput
style={styles.input}
placeholder="邮箱"
onChangeText={setEmail}
value={email}
autoCapitalize="none"
keyboardType="email-address"
/>
<TextInput
style={styles.input}
placeholder="密码"
secureTextEntry
onChangeText={setPassword}
value={password}
/>
<TouchableOpacity style={styles.button} onPress={handleLogin}>
<Text style={styles.buttonText}>登录</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 32,
},
input: {
width: '80%',
height: 48,
borderRadius: 5,
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#ddd',
padding: 8,
marginBottom: 16,
},
button: {
width: '80%',
height: 48,
borderRadius: 5,
backgroundColor: '#007aff',
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
fontSize: 16,
color: '#fff',
},
});
export default LoginScreen;
```
这个示例包括一个标题、一个用于输入电子邮件地址的文本输入框、一个用于输入密码的安全文本输入框和一个用于处理登录的按钮。当用户点击“登录”按钮时,将调用`handleLogin`函数来处理登录逻辑。
请注意,这只是一个非常基本的示例,您需要根据自己的需求对其进行修改和扩展。