Finix/rn-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加注册和账户信息页面，更新登录页面，修改样式和国际化文本，调整导航逻辑，更新 package.json 以支持 Node 22.12.0，替换 logo 图片。

Browse Source
This commit is contained in:
wuzhenyu
2025-08-29 17:33:18 +08:00
parent 1e1f06cb08
commit 579aee6efc
11 changed files with 707 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
views/AccountInfo/Components/Citizenship.jsx Normal file
View 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
View 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;

26
views/Guide/index.jsx
View File

@@ -51,7 +51,7 @@ const Index = () => {
if (user && user.token) {
resetAllRoutes('Home');
} else {
resetAllRoutes('Login');
resetAllRoutes('AccountInfo');
}
}, 1000);
}, [isFocused]);
@@ -65,21 +65,25 @@ const Index = () => {
alignItemsCenter,
flexRow
]}>
<Image
source={require('@/assets/images/logo.png')}
style={[
{
width: 52,
height: 52,
resizeMode: 'contain',
},
]}
/>
<Text
style={{
fontSize: 24,
fontSize: 32,
fontWeight: 'bold',
backgroundColor: 'red',
marginLeft: 10,
color: themeColor.color_text_base,
}}>
login111
Finix
</Text>
<Button type="primary" onPress={() => {
Toast.show({
content: 'Please enter user name',
position: 'center',
mask: true,
});
}}>Click me</Button>
</View>
</View>
);

186
views/Login/index.jsx
View File

@@ -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>
);
};

240
views/Signup/index.jsx Normal file
View File

@@ -0,0 +1,240 @@
import { useState, useEffect } from 'react';
import {
TextInput,
TouchableOpacity,
Image,
StyleSheet,
Alert,
StatusBar,
} from 'react-native';
import {
Checkbox,
Input,
Grid,
Icon,
View,
Text,
Toast,
Button,
} from '@ant-design/react-native';
import AsyncStorage from '@/storage/index';
import { useContextHook } from '@/components/AuthContext';
import { useTranslation } from 'react-i18next';
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 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')
// });
};
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>
<View style={[flexRow, { paddingHorizontal: 24 }]}>
<Text style={{ fontSize: 24, fontWeight: 'bold', color: themeColor.color_text_base, lineHeight: 38 }}>{t('Create_your_account')}</Text>
</View>
<View style={[flexRow, { paddingHorizontal: 24 }]}>
<Text style={{ fontSize: 14, color: themeColor.color_text_caption, lineHeight: 24 }}>{t('Let_us_get_started_with_a_free_Financy_account')}</Text>
</View>
<View style={[{ paddingHorizontal: 24, marginBottom: 16, paddingTop: 24 }]}>
<Input
style={[inputItem, { backgroundColor: themeColor.fill_base }]}
placeholder={t('Full_name')}
value={fullName}
onChangeText={setFullName}
autoCapitalize="none"
keyboardType="default"
/>
</View>
<View style={[{ paddingHorizontal: 24, marginBottom: 16 }]}>
<Input
style={[inputItem, { backgroundColor: themeColor.fill_base }]}
placeholder={t('Email')}
value={email}
onChangeText={setEmail}
autoCapitalize="none"
keyboardType="default"
/>
</View>
<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={{
height: 56,
borderRadius: 10,
}}
onPress={handleLogin}>
{t('Sign_Up')}
</Button>
</View>
<View style={[flexRow, alignItemsStart, justifyStart, { paddingLeft: 24, marginBottom: 16 }]}>
<Checkbox checked={checked} onChange={onChangeCheckbox} style={[{ width: 22 }]}>
</Checkbox>
<View style={[flexSub]}>
<TouchableOpacity onPress={() => {setChecked(!checked)}}>
<Text style={{ fontSize: 14, color: themeColor.color_text_base, lineHeight: 20 }}>{t('I_certify_that_I_am_18_years_of_age_or_older')}</Text>
</TouchableOpacity>
<View style={[flexRow]}>
<Text style={{ fontSize: 14, color: themeColor.color_text_base, lineHeight: 20 }}>{t('agree_to_the')}</Text>
<TouchableOpacity onPress={() => linkTo('UserAgreement')}>
<Text style={{ fontSize: 14, color: themeColor.brandPrimary, lineHeight: 20 }}>{t('User_Agreement')}</Text>
</TouchableOpacity>
<Text style={{ fontSize: 14, color: themeColor.color_text_base, lineHeight: 20 }}> {t('and')} </Text>
<TouchableOpacity onPress={() => linkTo('UserAgreement')}>
<Text style={{ fontSize: 14, color: themeColor.brandPrimary, lineHeight: 20 }}>{t('Privacy_Policy')}</Text>
</TouchableOpacity>
</View>
</View>
</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 LoginScreen;