添加注册和账户信息页面，更新登录页面，修改样式和国际化文本，调整导航逻辑，更新 package.json 以支持 Node 22.12.0，替换 logo 图片。
This commit is contained in:
wuzhenyu
96
views/AccountInfo/Components/Citizenship.jsx
Normal file
96
views/AccountInfo/Components/Citizenship.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
TouchableOpacity,
|
||||
} from 'react-native';
|
||||
|
||||
import {
|
||||
Checkbox,
|
||||
Input,
|
||||
Grid,
|
||||
Icon,
|
||||
View,
|
||||
Text,
|
||||
Toast,
|
||||
Button,
|
||||
Carousel
|
||||
} from '@ant-design/react-native';
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useContextHook } from '@/components/AuthContext/index';
|
||||
|
||||
import AsyncStorage from '@/storage/index';
|
||||
import { useRouter } from '@/hooks/useRouter';
|
||||
|
||||
import {
|
||||
statusBarHeight,
|
||||
paddingTopStatusBarHeight,
|
||||
flexRow,
|
||||
flexColumn,
|
||||
flexSub,
|
||||
flexShrink,
|
||||
flexWrap,
|
||||
flexnoWrap,
|
||||
justifyStart,
|
||||
justifyEnd,
|
||||
justifyCenter,
|
||||
justifyBetween,
|
||||
justifyAround,
|
||||
justifyEvenly,
|
||||
alignItemsStart,
|
||||
alignItemsEnd,
|
||||
alignItemsCenter,
|
||||
alignItemsStretch,
|
||||
positionRelative,
|
||||
positionAbsolute,
|
||||
useStyles,
|
||||
} from '@/assets/styles/css';
|
||||
|
||||
const inputItem = useStyles({
|
||||
height: 56,
|
||||
width: '100%',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
});
|
||||
|
||||
const Index = () => {
|
||||
|
||||
const { themeColor } = useContextHook();
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const { linkTo, resetAllRoutes, isFocused } = useRouter();
|
||||
useEffect(() => {
|
||||
// 这里请求配置后，再跳转
|
||||
}, [isFocused]);
|
||||
|
||||
return (
|
||||
<View style={[flexSub]}>
|
||||
<View style={[flexRow, { paddingHorizontal: 24 }]}>
|
||||
<Text style={{ fontSize: 24, fontWeight: 'bold', color: themeColor.color_text_base, lineHeight: 38 }}>{t('What’s_your_citizenship')}?</Text>
|
||||
</View>
|
||||
<View style={[flexRow, { paddingLeft: 24, paddingRight: 100 }]}>
|
||||
<Text style={{ fontSize: 14, color: themeColor.color_text_caption, lineHeight: 24 }}>{t('If_you’re_a_citizen_of_more_than_one_country,_please_pick_one')}</Text>
|
||||
</View>
|
||||
|
||||
<View style={[flexRow, { padding: 24 }]}>
|
||||
<Text style={{ fontSize: 18, fontWeight: 'bold', color: themeColor.color_text_base, lineHeight: 24 }}>{t('Citizenship')}?</Text>
|
||||
</View>
|
||||
|
||||
<View style={[flexRow, { padding: 24 }]}>
|
||||
<Text style={{ fontSize: 18, fontWeight: 'bold', color: themeColor.color_text_base, lineHeight: 24 }}>{t('Citizenship')}?</Text>
|
||||
</View>
|
||||
|
||||
|
||||
|
||||
<View style={[flexSub]}></View>
|
||||
|
||||
<View style={[flexRow, alignItemsCenter, justifyCenter, { padding: 24 }]}>
|
||||
<Text style={{ fontSize: 14, color: themeColor.color_text_caption, lineHeight: 24 }}>{t('Do_not_have_an_account')}</Text>
|
||||
<TouchableOpacity onPress={() => linkTo('Login')}>
|
||||
<Text style={{ fontSize: 14, color: themeColor.brandPrimary, lineHeight: 24 }}>{t('Sign_In')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
export default Index;
|
||||
176
views/AccountInfo/index.jsx
Normal file
176
views/AccountInfo/index.jsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
StyleSheet,
|
||||
Alert,
|
||||
StatusBar,
|
||||
} from 'react-native';
|
||||
|
||||
import {
|
||||
Checkbox,
|
||||
Input,
|
||||
Grid,
|
||||
Icon,
|
||||
View,
|
||||
Text,
|
||||
Toast,
|
||||
Button,
|
||||
Carousel
|
||||
} from '@ant-design/react-native';
|
||||
|
||||
|
||||
import { useContextHook } from '@/components/AuthContext';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useRouter } from '@/hooks/useRouter';
|
||||
|
||||
import Citizenship from './Components/Citizenship';
|
||||
|
||||
import {
|
||||
statusBarHeight,
|
||||
paddingTopStatusBarHeight,
|
||||
flexRow,
|
||||
flexColumn,
|
||||
flexSub,
|
||||
flexShrink,
|
||||
flexWrap,
|
||||
flexnoWrap,
|
||||
justifyStart,
|
||||
justifyEnd,
|
||||
justifyCenter,
|
||||
justifyBetween,
|
||||
justifyAround,
|
||||
justifyEvenly,
|
||||
alignItemsStart,
|
||||
alignItemsEnd,
|
||||
alignItemsCenter,
|
||||
alignItemsStretch,
|
||||
positionRelative,
|
||||
positionAbsolute,
|
||||
useStyles,
|
||||
} from '@/assets/styles/css';
|
||||
|
||||
|
||||
const inputItem = useStyles({
|
||||
height: 56,
|
||||
width: '100%',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
});
|
||||
|
||||
const LoginScreen = () => {
|
||||
const { themeColor } = useContextHook();
|
||||
const { t, i18n } = useTranslation();
|
||||
console.log('🚀 ~ LoginScreen ~ i18n:', i18n)
|
||||
|
||||
const { linkTo } = useRouter();
|
||||
const [language, setLanguage] = useState('en');
|
||||
|
||||
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const [checked, setChecked] = useState(false);
|
||||
const onChangeCheckbox = (e) => {
|
||||
console.log('checked = ', e.target.checked)
|
||||
setChecked(e.target.checked)
|
||||
}
|
||||
|
||||
const handleLogin = () => {
|
||||
if (!email) {
|
||||
Toast.show({
|
||||
content: t('Please enter email'),
|
||||
position: 'center',
|
||||
mask: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!password) {
|
||||
Toast.show({
|
||||
content: t('Please enter password'),
|
||||
position: 'center',
|
||||
mask: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const key = Toast.show({
|
||||
icon: 'loading',
|
||||
content: t('loading'),
|
||||
position: 'center',
|
||||
mask: true,
|
||||
duration: 0,
|
||||
});
|
||||
console.log(123, 123);
|
||||
// login({ username, password })
|
||||
// .then(res => {
|
||||
// Toast.remove(key);
|
||||
// setTimeout(() => {
|
||||
// Toast.show({
|
||||
// content: t('login success'), //i18n.t('login_success'),
|
||||
// position: 'center',
|
||||
// mask: true,
|
||||
// onClose: () => {
|
||||
// // 设置全局的用户信息
|
||||
// setUser(res.user)
|
||||
// AsyncStorage.setItem('appToken', {
|
||||
// appToken: res.token,
|
||||
// user: res.user,
|
||||
// }).then(() => {
|
||||
// linkTo('Home');
|
||||
// });
|
||||
// },
|
||||
// });
|
||||
// }, 200);
|
||||
// })
|
||||
// .catch(err => {
|
||||
// Toast.remove(key);
|
||||
// setTimeout(() => {
|
||||
// Toast.show({
|
||||
// content: t('login_failed'), // i18n.t('login_failed'),
|
||||
// position: 'center',
|
||||
// mask: true,
|
||||
// });
|
||||
// }, 200);
|
||||
// // i18n.t('login_error_message')
|
||||
// });
|
||||
};
|
||||
|
||||
const carouselRef = useRef(null);
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
flexSub,
|
||||
justifyStart,
|
||||
alignItemsStretch,
|
||||
{
|
||||
backgroundColor: themeColor.fill_body,
|
||||
},
|
||||
]}>
|
||||
<View style={[{ paddingTop: 20 }]}>
|
||||
<View style={[{ paddingHorizontal: 24, paddingVertical: 16 }]}>
|
||||
<Icon name="close" size={24} color={themeColor.color_text_base} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Carousel
|
||||
selectedIndex={selectedIndex}
|
||||
autoplay={false}
|
||||
ref={carouselRef}
|
||||
style={[flexSub, {}]}
|
||||
>
|
||||
<Citizenship />
|
||||
<View style={[flexSub]}>
|
||||
<Text>Carousel 2</Text>
|
||||
</View>
|
||||
</Carousel>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
export default LoginScreen;
|
||||
Reference in New Issue
Block a user