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

16
App.jsx
View File

@@ -23,10 +23,12 @@ import { AuthProvider, useContextHook } from './components/AuthContext/index';
import Login from '@/views/Login/index';
import Signup from '@/views/Signup/index';
import Guide from '@/views/Guide/index';
import HomeIndex from '@/views/Home/Index/index';
import HomeInventory from '@/views/Home/Inventory/index';
import HomeProfile from '@/views/Home/Profile/index';
import AccountInfo from '@/views/AccountInfo/index';
const Tab = createBottomTabNavigator();
@@ -107,6 +109,13 @@ function RootStack() {
}}
component={Login}
/>
<Stack.Screen
name="Signup"
options={{
headerShown: false,
}}
component={Signup}
/>
<Stack.Screen
name="Home"
component={HomeTabs}
@@ -114,6 +123,13 @@ function RootStack() {
headerShown: false,
}}
/>
<Stack.Screen
name="AccountInfo"
component={AccountInfo}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
);
}

BIN
assets/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

13
assets/styles/css.js
View File

@@ -82,13 +82,14 @@ export const positionFixed = useStyles({
position: 'fixed',
});
export const getColor = (color = {brandPrimary: '#ff6600', brandPrimaryTap: '#ff6600' }) => {
export const getColor = (
color = { brandPrimary: '#6B39F4', brandPrimaryTap: '#ff6600', checkbox_border: '#888888', fill_body: '#ffffff',fill_base: '#f5f5f9' },
) => {
const brandPrimary = color.brandPrimary || '#108ee9';
const brandPrimaryTap = color.brandPrimaryTap || '#1284d6';
const brandPrimaryTap = color.brandPrimaryTap || '#1284d6';
return {
transparent: 'transparent',
brandPrimary,
brandPrimaryTap,
brandPrimary,
brandPrimaryTap,
// 文字色
color_text_base: color.color_text_base || '#000000', // 基本
@@ -124,7 +125,7 @@ export const getColor = (color = {brandPrimary: '#ff6600', brandPrimaryTap: '#ff
primary_button_fill_tap: color.primary_button_fill_tap || brandPrimaryTap,
ghost_button_color: color.ghost_button_color || brandPrimary, // 同时应用于背景、文字颜色、边框色
ghost_button_fill_tap: color.ghost_button_fill_tap || `${brandPrimary}99`, // alpha 60%
ghost_button_fill_tap: color.ghost_button_fill_tap || `${brandPrimary}99`, // alpha 60%
warning_button_fill: color.warning_button_fill || '#e94f4f',
warning_button_fill_tap: color.warning_button_fill_tap || '#d24747',

30
locales/en.json
View File

@@ -1,10 +1,28 @@
{
"welcome": "Welcome",
"greeting": "Hello, {{name}}!",
"login": "Login123",
"username": "Username",
"password": "Password",
"Welcome_Back": "Welcome Back!",
"Sign_in_to_your_account": "Sign in to your account",
"Sign_In": "Sign In",
"Remember_me": "Remember me",
"Forgot_password": "Forgot password?",
"Do_not_have_an_account": "Don’t have an account?",
"Sign_Up": "Sign Up",
"Or_sign_in_with": "Or sign in with",
"Email": "Email",
"Password": "Password",
"Please_enter_email": "Please enter email",
"Please_enter_password": "Please enter password",
"loading": "Loading...",
"login_success": "Login Success",
"login_failed": "Login Failed",
"login_error_message": "Login Failed, Please Try Again"
"login_error_message": "Login Failed, Please Try Again",
"Create_your_account": "Create your account",
"Let_us_get_started_with_a_free_Financy_account": "Let us get started with a free Financy account.",
"Full_name": "Full name",
"I_certify_that_I_am_18_years_of_age_or_older": "I certify that I’m 18 years of age or older",
"agree_to_the": "agree to the",
"User_Agreement": "User Agreement",
"Privacy_Policy": "Privacy Policy.",
"What’s_your_citizenship": "What’s your citizenship?",
"If_you’re_a_citizen_of_more_than_one_country,_please_pick_one": "If you’re a citizen of more than one country, please pick one.",
"Citizenship": "Citizenship"
}

27
locales/zh.json
View File

@@ -1,10 +1,21 @@
{
"welcome": "欢迎",
"greeting": "你好, {{name}}!",
"login": "登录",
"username": "用户名",
"password": "密码",
"login_success": "登录成功",
"login_failed": "登录失败",
"login_error_message": "登录失败，请重试"
"Welcome_Back": "Welcome Back!",
"Sign_in_to_your_account": "Sign in to your account",
"Sign_In": "Sign In",
"Remember_me": "Remember me",
"Forgot_password": "Forgot password?",
"Do_not_have_an_account": "Don't have an account?",
"Sign_up": "Sign up",
"Or_sign_in_with": "Or sign in with",
"Email": "Email",
"Password": "Password",
"Please_enter_email": "Please enter email",
"Please_enter_password": "Please enter password",
"loading": "Loading...",
"login_success": "Login Success",
"login_failed": "Login Failed",
"login_error_message": "Login Failed, Please Try Again",
"Create_your_account": "Create your account",
"Let_us_get_started_with_a_free_Financy_account": "Let us get started with a free Financy account",
"Full_name": "Full name"
}

3
package.json
View File

@@ -53,5 +53,8 @@
},
"engines": {
"node": ">=18"
},
"volta": {
"node": "22.12.0"
}
}

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;