添加注册和账户信息页面，更新登录页面，修改样式和国际化文本，调整导航逻辑，更新 package.json 以支持 Node 22.12.0，替换 logo 图片。
This commit is contained in:
wuzhenyu
@@ -1,20 +1,30 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
StyleSheet,
|
||||
Alert,
|
||||
StatusBar,
|
||||
} from 'react-native';
|
||||
import { Provider, Toast } from '@ant-design/react-native';
|
||||
|
||||
|
||||
import AsyncStorage from '@/storage/index';
|
||||
import {
|
||||
Checkbox,
|
||||
Input,
|
||||
Grid,
|
||||
Icon,
|
||||
View,
|
||||
Text,
|
||||
Toast,
|
||||
Button,
|
||||
} from '@ant-design/react-native';
|
||||
|
||||
|
||||
import AsyncStorage from '@/storage/index';
|
||||
import { useNavigation, useIsFocused } from '@react-navigation/native';
|
||||
import { useContextHook } from '@/components/AuthContext';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useRouter } from '@/hooks/useRouter';
|
||||
|
||||
import {
|
||||
statusBarHeight,
|
||||
@@ -42,13 +52,11 @@ import {
|
||||
|
||||
|
||||
const inputItem = useStyles({
|
||||
width: '80%',
|
||||
height: 40,
|
||||
borderColor: 'gray',
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
paddingHorizontal: 10,
|
||||
marginBottom: 20,
|
||||
height: 56,
|
||||
width: '100%',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
});
|
||||
|
||||
const LoginScreen = () => {
|
||||
@@ -56,22 +64,18 @@ const LoginScreen = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
console.log('🚀 ~ LoginScreen ~ i18n:', i18n)
|
||||
|
||||
const router = useNavigation();
|
||||
const { linkTo } = useRouter();
|
||||
const [language, setLanguage] = useState('en');
|
||||
|
||||
const isFocused = useIsFocused();
|
||||
|
||||
const [username, setUsername] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
useEffect(() => {
|
||||
|
||||
}, [isFocused]);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const handleLogin = () => {
|
||||
if (!username) {
|
||||
if (!email) {
|
||||
Toast.show({
|
||||
content: t('Please enter user name'),
|
||||
content: t('Please enter email'),
|
||||
position: 'center',
|
||||
mask: true,
|
||||
});
|
||||
@@ -92,7 +96,7 @@ const LoginScreen = () => {
|
||||
mask: true,
|
||||
duration: 0,
|
||||
});
|
||||
console.log(123,123);
|
||||
console.log(123, 123);
|
||||
// login({ username, password })
|
||||
// .then(res => {
|
||||
// Toast.remove(key);
|
||||
@@ -108,7 +112,7 @@ const LoginScreen = () => {
|
||||
// appToken: res.token,
|
||||
// user: res.user,
|
||||
// }).then(() => {
|
||||
// router.replace('Home');
|
||||
// linkTo('Home');
|
||||
// });
|
||||
// },
|
||||
// });
|
||||
@@ -131,64 +135,96 @@ const LoginScreen = () => {
|
||||
<View
|
||||
style={[
|
||||
flexSub,
|
||||
justifyCenter,
|
||||
alignItemsCenter,
|
||||
justifyStart,
|
||||
alignItemsStretch,
|
||||
{
|
||||
backgroundColor: themeColor.colorBgBase,
|
||||
backgroundColor: themeColor.fill_body,
|
||||
},
|
||||
]}>
|
||||
<View style={[{ padding: 20 }]}>
|
||||
<Image
|
||||
source={require('@/assets/images/logo.png')}
|
||||
style={[
|
||||
{
|
||||
width: 300,
|
||||
height: 150,
|
||||
resizeMode: 'contain',
|
||||
},
|
||||
]}
|
||||
<View style={[{ backgroundColor: themeColor.color_text_base, height: 240, paddingTop: 20 }]}>
|
||||
<View style={[{ paddingHorizontal: 24, paddingVertical: 16 }]}>
|
||||
<Icon name="close" size={24} color={themeColor.color_text_base_inverse} />
|
||||
</View>
|
||||
<View style={[flexRow, alignItemsCenter, justifyCenter]}>
|
||||
<Image
|
||||
source={require('@/assets/images/logo.png')}
|
||||
style={[
|
||||
{
|
||||
width: 64,
|
||||
height: 64,
|
||||
resizeMode: 'contain',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
<View style={[flexRow, alignItemsCenter, justifyCenter]}>
|
||||
<Text style={{ fontSize: 24, fontWeight: 'bold', color: themeColor.color_text_base_inverse, lineHeight: 38 }}>{t('Welcome_Back')}</Text>
|
||||
</View>
|
||||
<View style={[flexRow, alignItemsCenter, justifyCenter]}>
|
||||
<Text style={{ fontSize: 14, color: themeColor.color_text_caption, lineHeight: 24 }}>{t('Sign_in_to_your_account')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[{ paddingHorizontal: 24, marginBottom: 16, paddingTop: 24 }]}>
|
||||
<Input
|
||||
style={[inputItem, { backgroundColor: themeColor.fill_base }]}
|
||||
placeholder={t('Email')}
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
autoCapitalize="none"
|
||||
keyboardType="default"
|
||||
/>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 20,
|
||||
}}>
|
||||
{t('login')}
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[inputItem]}
|
||||
placeholder={t('username')}
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
autoCapitalize="none"
|
||||
keyboardType="default"
|
||||
/>
|
||||
<TextInput
|
||||
style={[inputItem]}
|
||||
placeholder={t('password')}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
width: '80%',
|
||||
backgroundColor: '#7ac0f6',
|
||||
borderRadius: 5,
|
||||
paddingVertical: 10,
|
||||
}}
|
||||
onPress={handleLogin}>
|
||||
<Text
|
||||
<View style={[{ paddingHorizontal: 24, marginBottom: 16 }]}>
|
||||
<Input
|
||||
style={[inputItem, { backgroundColor: themeColor.fill_base }]}
|
||||
placeholder={t('Password')}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
type={!showPassword ? 'password' : 'text'}
|
||||
suffix={
|
||||
<TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
|
||||
<Icon name={!showPassword ? 'eye-invisible' : 'eye'} size={24} color={themeColor.color_text_placeholder} />
|
||||
</TouchableOpacity>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<View style={[{ paddingHorizontal: 24, marginBottom: 16 }]}>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
fontSize: 18,
|
||||
}}>
|
||||
{t('login')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
height: 56,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
onPress={handleLogin}>
|
||||
{t('Sign_In')}
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<View style={[flexRow, alignItemsCenter, justifyBetween, { paddingHorizontal: 24, marginBottom: 16 }]}>
|
||||
<Checkbox>
|
||||
<Text style={{ fontSize: 14, color: themeColor.color_text_base, lineHeight: 24 }}>{t('Remember_me')}</Text>
|
||||
</Checkbox>
|
||||
|
||||
<View style={[{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]}>
|
||||
<TouchableOpacity onPress={() => linkTo('ForgotPassword')}>
|
||||
<Text style={{ fontSize: 14, color: themeColor.brandPrimary, lineHeight: 24, fontWeight: 'bold' }}>{t('Forgot_password')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
{/* <View style={[{ paddingHorizontal: 24, marginBottom: 16 }]}>
|
||||
<View style={[{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]}>
|
||||
<Text style={{ fontSize: 14, color: themeColor.color_text_caption, lineHeight: 24 }}>{t('Or_sign_in_with')}</Text>
|
||||
</View>
|
||||
</View> */}
|
||||
<View style={[flexSub]}></View>
|
||||
|
||||
<View style={[{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 24 }]}>
|
||||
<Text style={{ fontSize: 14, color: themeColor.color_text_caption, lineHeight: 24 }}>{t('Do_not_have_an_account')}</Text>
|
||||
<TouchableOpacity onPress={() => linkTo('Signup')}>
|
||||
<Text style={{ fontSize: 14, color: themeColor.brandPrimary, lineHeight: 24 }}>{t('Sign_up')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user