我需要一个react native的demo代码
时间: 2023-08-07 16:05:27 浏览: 117
当然可以!以下是一个简单的 React Native Demo 代码,用于创建一个简单的登录界面:
```javascript
import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';
const App = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleLogin = () => {
// 在这里处理登录逻辑
console.log('登录:', username, password);
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="用户名"
value={username}
onChangeText={(text) => setUsername(text)}
/>
<TextInput
style={styles.input}
placeholder="密码"
secureTextEntry
value={password}
onChangeText={(text) => setPassword(text)}
/>
<TouchableOpacity style={styles.button} onPress={handleLogin}>
<Text style={styles.buttonText}>登录</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 16,
},
input: {
width: '100%',
height: 40,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 4,
marginBottom: 10,
paddingLeft: 10,
},
button: {
width: '100%',
height: 40,
backgroundColor: 'blue',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
},
buttonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
});
export default App;
```
这是一个简单的登录界面,包含了用户名和密码的输入框,以及一个登录按钮。当点击登录按钮时,会在控制台打印出输入的用户名和密码。你可以根据自己的需求来扩展和修改这段代码。希望对你有帮助!
阅读全文