推荐项目:React Native登录界面模板
warning:
这篇文章距离上次修改已过187天,其中的内容可能已经有所变动。
React Native登录屏幕模板可以使用react-native-elements
库来创建。以下是一个简单的登录页面示例代码:
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Input, Button } from 'react-native-elements';
const LoginScreen = () => {
return (
<View style={styles.container}>
<Image source={require('./logo.png')} style={styles.logo} />
<View style={styles.inputContainer}>
<Input
placeholder="用户名"
leftIcon={{ type: 'font-awesome', name: 'user' }}
/>
<Input
placeholder="密码"
leftIcon={{ type: 'font-awesome', name: 'lock' }}
secureTextEntry={true}
/>
</View>
<Button title="登录" buttonStyle={styles.loginButton} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
logo: {
height: 150,
width: 150,
marginBottom: 30,
},
inputContainer: {
width: '100%',
},
loginButton: {
marginTop: 20,
width: '80%',
},
});
export default LoginScreen;
在这个例子中,我们使用了react-native-elements
的Input
组件来创建输入框,以及Button
组件来创建登录按钮。StyleSheet.create
用于定义视图的样式。这个模板可以根据您的需求进行扩展和修改。
评论已关闭