推荐开源项目:React Native Magnus - 轻松打造高性能移动应用
Magnus 是一个用于 React Native 应用程序的组件库,旨在帮助开发者快速构建高质量的移动应用。以下是如何使用 Magnus 创建一个简单的登录屏幕的示例代码:
import React from 'react';
import { View, TextInput, Button } from 'react-native';
import { Magnus } from 'react-native-magnus';
const LoginScreen = () => {
const [email, setEmail] = React.useState('');
const [password, setPassword] = React.useState('');
return (
<View>
<TextInput
label="Email"
value={email}
onChangeText={setEmail}
mt={4}
/>
<TextInput
label="Password"
value={password}
onChangeText={setPassword}
mt={4}
secureTextEntry
/>
<Button
title="Login"
onPress={() => console.log('Login with:', { email, password })}
mt={4}
/>
</View>
);
};
export default LoginScreen;
这段代码展示了如何使用 Magnus 的 TextInput
组件创建带标签的输入框,以及如何使用 Button
组件创建一个按钮。通过使用 mt={4}
这样的属性,Magnus 简化了设计与开发之间的工作,加快了开发速度。
评论已关闭