|
|
import React, { useEffect, useState, useRef } from "react"; |
|
|
import { |
|
|
View, |
|
|
Text, |
|
|
StyleSheet, |
|
|
TouchableOpacity, |
|
|
StatusBar, |
|
|
Platform, |
|
|
BackHandler, |
|
|
TextInput, |
|
|
Animated, |
|
|
Easing, |
|
|
FlatList, |
|
|
Keyboard, |
|
|
Modal, |
|
|
InteractionManager, |
|
|
Image, |
|
|
Alert |
|
|
} from "react-native"; |
|
|
import { useTranslation } from "react-i18next"; |
|
|
import { useNavigation } from "@react-navigation/native"; |
|
|
import type { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
|
import { Country, countries } from "../constants/countries"; |
|
|
import { useAuth } from "../contexts/AuthContext"; |
|
|
import { settingApi } from "../services/api/setting"; |
|
|
import { userApi } from "../services/api/userApi"; |
|
|
import AsyncStorage from "@react-native-async-storage/async-storage"; |
|
|
|
|
|
import useUserStore from "../store/user"; |
|
|
|
|
|
type RootStackParamList = { |
|
|
Login: undefined; |
|
|
EmailLogin: undefined; |
|
|
MainTabs: { screen: string }; |
|
|
Google: undefined; |
|
|
Home: { screen: string }; |
|
|
}; |
|
|
|
|
|
// 常见邮箱后缀列表 |
|
|
const EMAIL_DOMAINS = [ |
|
|
"gmail.com", |
|
|
"yahoo.com", |
|
|
"hotmail.com", |
|
|
"outlook.com", |
|
|
"icloud.com", |
|
|
"mail.com", |
|
|
"protonmail.com", |
|
|
"qq.com", |
|
|
"163.com", |
|
|
"126.com", |
|
|
]; |
|
|
|
|
|
type LoginScreenProps = { |
|
|
onClose?: () => void; |
|
|
isModal?: boolean; |
|
|
}; |
|
|
|
|
|
export const LoginScreen = ({ onClose, isModal }: LoginScreenProps) => { |
|
|
const { t } = useTranslation(); |
|
|
const navigation = |
|
|
useNavigation<NativeStackNavigationProp<RootStackParamList>>(); |
|
|
const { login } = useAuth(); |
|
|
const { setSettings, settings, user, setUser } = useUserStore(); |
|
|
|
|
|
// 邮箱登录状态 |
|
|
const [showEmailLogin, setShowEmailLogin] = useState(false); |
|
|
const [email, setEmail] = useState(""); |
|
|
const [emailPassword, setEmailPassword] = useState(""); |
|
|
const [emailPasswordError, setEmailPasswordError] = useState(false); |
|
|
const [showSuggestions, setShowSuggestions] = useState(false); |
|
|
const [suggestions, setSuggestions] = useState<string[]>([]); |
|
|
|
|
|
// 手机号登录状态 |
|
|
const [showPhoneLogin, setShowPhoneLogin] = useState(false); |
|
|
const [phoneNumber, setPhoneNumber] = useState(""); |
|
|
const [password, setPassword] = useState(""); |
|
|
const [passwordError, setPasswordError] = useState(false); |
|
|
const [showCountryModal, setShowCountryModal] = useState(false); |
|
|
const [selectedCountry, setSelectedCountry] = useState<Country>({ |
|
|
name: "Republic of Congo", |
|
|
code: "CG", |
|
|
flag: "🇨🇬", |
|
|
userCount: 300000, |
|
|
phoneCode: "+242", |
|
|
}); |
|
|
|
|
|
// 动画值 |
|
|
const emailSlideAnim = useRef(new Animated.Value(400)).current; |
|
|
const phoneSlideAnim = useRef(new Animated.Value(400)).current; |
|
|
const [emailLoginMounted, setEmailLoginMounted] = useState(false); |
|
|
const [phoneLoginMounted, setPhoneLoginMounted] = useState(false); |
|
|
|
|
|
// 处理邮箱输入变化，生成邮箱建议 |
|
|
const handleEmailChange = (text: string) => { |
|
|
setEmail(text); |
|
|
|
|
|
// 检查是否包含@符号 |
|
|
if (text.includes("@")) { |
|
|
const [username, domain] = text.split("@"); |
|
|
|
|
|
if (domain) { |
|
|
// 如果已经输入了部分域名，过滤匹配的域名 |
|
|
const filteredDomains = EMAIL_DOMAINS.filter((item) => |
|
|
item.toLowerCase().startsWith(domain.toLowerCase()) |
|
|
); |
|
|
|
|
|
// 生成完整的邮箱建议列表 |
|
|
const emailSuggestions = filteredDomains.map((d) => `${username}@${d}`); |
|
|
setSuggestions(emailSuggestions); |
|
|
setShowSuggestions(emailSuggestions.length > 0); |
|
|
} else { |
|
|
// 如果只输入了@，显示所有域名建议 |
|
|
const emailSuggestions = EMAIL_DOMAINS.map((d) => `${username}@${d}`); |
|
|
setSuggestions(emailSuggestions); |
|
|
setShowSuggestions(true); |
|
|
} |
|
|
} else if (text.length > 0) { |
|
|
// 没有@符号但有输入内容，显示常见邮箱后缀建议 |
|
|
const emailSuggestions = EMAIL_DOMAINS.map((d) => `${text}@${d}`); |
|
|
setSuggestions(emailSuggestions); |
|
|
setShowSuggestions(true); |
|
|
} else { |
|
|
// 输入为空，不显示建议 |
|
|
setShowSuggestions(false); |
|
|
} |
|
|
}; |
|
|
|
|
|
// 选择一个邮箱建议 |
|
|
const handleSelectSuggestion = (suggestion: string) => { |
|
|
setEmail(suggestion); |
|
|
setShowSuggestions(false); |
|
|
}; |
|
|
|
|
|
// 验证邮箱格式 |
|
|
const isValidEmail = (email: string): boolean => { |
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
|
|
return emailRegex.test(email); |
|
|
}; |
|
|
|
|
|
// 渲染单个邮箱建议项 |
|
|
const renderSuggestionItem = ({ item }: { item: string }) => ( |
|
|
<TouchableOpacity |
|
|
style={styles.suggestionItem} |
|
|
onPress={() => handleSelectSuggestion(item)} |
|
|
> |
|
|
<Text style={styles.suggestionText}>{item}</Text> |
|
|
</TouchableOpacity> |
|
|
); |
|
|
|
|
|
// 选择国家 |
|
|
const handleCountrySelect = (country: Country) => { |
|
|
setSelectedCountry(country); |
|
|
setShowCountryModal(false); |
|
|
}; |
|
|
|
|
|
// 渲染国家列表项 - 添加性能优化 |
|
|
const renderCountryItem = React.useCallback( |
|
|
({ item }: { item: Country }) => ( |
|
|
<TouchableOpacity |
|
|
style={styles.countryItem} |
|
|
onPress={() => handleCountrySelect(item)} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.countryItemFlag}>{item.flag}</Text> |
|
|
<View style={styles.countryItemContent}> |
|
|
<Text style={styles.countryItemName}>{item.name}</Text> |
|
|
<Text style={styles.countryItemCode}>{item.phoneCode}</Text> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
), |
|
|
[] |
|
|
); |
|
|
|
|
|
// 添加Android返回按钮处理 |
|
|
useEffect(() => { |
|
|
const backAction = () => { |
|
|
if (showEmailLogin) { |
|
|
closeEmailLogin(); |
|
|
return true; |
|
|
} |
|
|
if (showPhoneLogin) { |
|
|
closePhoneLogin(); |
|
|
return true; |
|
|
} |
|
|
if (showCountryModal) { |
|
|
setShowCountryModal(false); |
|
|
return true; |
|
|
} |
|
|
handleClose(); |
|
|
return true; |
|
|
}; |
|
|
|
|
|
const backHandler = BackHandler.addEventListener( |
|
|
"hardwareBackPress", |
|
|
backAction |
|
|
); |
|
|
|
|
|
return () => backHandler.remove(); |
|
|
}, [showEmailLogin, showPhoneLogin, showCountryModal]); |
|
|
|
|
|
// 初始化动画配置 |
|
|
useEffect(() => { |
|
|
// React Native Animated API不支持直接设置useNativeDriver |
|
|
// 这些配置会在动画函数中使用 |
|
|
}, []); |
|
|
|
|
|
// 打开邮箱登录面板 |
|
|
const openEmailLogin = () => { |
|
|
emailSlideAnim.setValue(400); |
|
|
setEmailLoginMounted(true); |
|
|
|
|
|
// 等待组件挂载后启动动画 |
|
|
requestAnimationFrame(() => { |
|
|
setShowEmailLogin(true); |
|
|
Animated.spring(emailSlideAnim, { |
|
|
toValue: 0, |
|
|
useNativeDriver: true, |
|
|
friction: 8, |
|
|
tension: 40, |
|
|
restDisplacementThreshold: 0.01, |
|
|
restSpeedThreshold: 0.01, |
|
|
}).start(); |
|
|
}); |
|
|
}; |
|
|
|
|
|
// 关闭邮箱登录面板 |
|
|
const closeEmailLogin = () => { |
|
|
Keyboard.dismiss(); |
|
|
|
|
|
// 使用更简单的配置减少计算复杂度 |
|
|
Animated.timing(emailSlideAnim, { |
|
|
toValue: 400, |
|
|
duration: 200, |
|
|
useNativeDriver: true, |
|
|
easing: Easing.cubic, |
|
|
}).start(); |
|
|
|
|
|
// 先隐藏建议列表，减少布局计算 |
|
|
setShowSuggestions(false); |
|
|
|
|
|
// 使用InteractionManager确保动画完成后再执行耗时操作 |
|
|
InteractionManager.runAfterInteractions(() => { |
|
|
setShowEmailLogin(false); |
|
|
setEmail(""); |
|
|
setEmailPassword(""); |
|
|
setEmailPasswordError(false); |
|
|
|
|
|
// 延迟卸载组件 |
|
|
setTimeout(() => { |
|
|
setEmailLoginMounted(false); |
|
|
}, 50); |
|
|
}); |
|
|
}; |
|
|
|
|
|
// 打开手机号登录面板 |
|
|
const openPhoneLogin = () => { |
|
|
phoneSlideAnim.setValue(400); |
|
|
setPhoneLoginMounted(true); |
|
|
|
|
|
// 等待组件挂载后启动动画 |
|
|
requestAnimationFrame(() => { |
|
|
setShowPhoneLogin(true); |
|
|
Animated.spring(phoneSlideAnim, { |
|
|
toValue: 0, |
|
|
useNativeDriver: true, |
|
|
friction: 8, |
|
|
tension: 40, |
|
|
restDisplacementThreshold: 0.01, |
|
|
restSpeedThreshold: 0.01, |
|
|
}).start(); |
|
|
}); |
|
|
}; |
|
|
|
|
|
// 关闭手机号登录面板 |
|
|
const closePhoneLogin = () => { |
|
|
Keyboard.dismiss(); |
|
|
|
|
|
// 使用更简单的配置减少计算复杂度 |
|
|
Animated.timing(phoneSlideAnim, { |
|
|
toValue: 400, |
|
|
duration: 200, |
|
|
useNativeDriver: true, |
|
|
easing: Easing.cubic, |
|
|
}).start(); |
|
|
|
|
|
// 使用InteractionManager确保动画完成后再执行耗时操作 |
|
|
InteractionManager.runAfterInteractions(() => { |
|
|
setShowPhoneLogin(false); |
|
|
setPhoneNumber(""); |
|
|
|
|
|
// 延迟卸载组件 |
|
|
setTimeout(() => { |
|
|
setPhoneLoginMounted(false); |
|
|
}, 50); |
|
|
}); |
|
|
}; |
|
|
|
|
|
// 修改关闭按钮处理函数 |
|
|
const handleClose = () => { |
|
|
if (isModal && onClose) { |
|
|
onClose(); |
|
|
} else { |
|
|
navigation.goBack(); |
|
|
} |
|
|
}; |
|
|
|
|
|
// 处理谷歌登录 |
|
|
const handleGoogleLogin = async () => { |
|
|
navigation.navigate("Google"); |
|
|
}; |
|
|
|
|
|
const handleFacebookLogin = () => { |
|
|
// 处理Facebook登录 |
|
|
}; |
|
|
|
|
|
const handleAppleLogin = () => { |
|
|
// 处理Apple登录 |
|
|
}; |
|
|
|
|
|
const handleInstagramLogin = () => { |
|
|
// 处理Instagram登录 |
|
|
}; |
|
|
|
|
|
const handleEmailLogin = () => { |
|
|
// 处理邮箱登录 - 显示邮箱登录面板 |
|
|
openEmailLogin(); |
|
|
}; |
|
|
|
|
|
// |
|
|
const handleEmailContinue = async () => { |
|
|
const params = { |
|
|
grant_type: "password", |
|
|
username: "lifei", |
|
|
password: "123456", |
|
|
client_id: "2", |
|
|
client_secret: "", |
|
|
scope: "", |
|
|
}; |
|
|
try { |
|
|
const res = await userApi.login(params); |
|
|
if (res.access_token) { |
|
|
const token = res.token_type + " " + res.access_token; |
|
|
await AsyncStorage.setItem("token", token); |
|
|
// const data = await settingApi.postFirstLogin(221); |
|
|
// setSettings(data); |
|
|
const user = await userApi.getProfile() |
|
|
setUser(user); |
|
|
navigation.navigate("MainTabs", { screen: "Home" }); |
|
|
} |
|
|
} catch (error) { |
|
|
Alert.alert(t("loginFailed")); |
|
|
} |
|
|
}; |
|
|
|
|
|
const handlePhoneLogin = () => { |
|
|
// 处理手机号登录 - 显示手机号登录面板 |
|
|
openPhoneLogin(); |
|
|
}; |
|
|
|
|
|
const handlePhoneVerificationSuccess = async () => { |
|
|
await login(); |
|
|
closePhoneLogin(); |
|
|
navigation.replace("MainTabs", { screen: "Home" }); |
|
|
}; |
|
|
|
|
|
const handlePhoneContinue = async () => { |
|
|
if (phoneNumber.trim() && password) { |
|
|
if (password === "123") { |
|
|
await login(); |
|
|
closePhoneLogin(); |
|
|
navigation.replace("MainTabs", { screen: "Home" }); |
|
|
} else { |
|
|
setPasswordError(true); |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
const handleForgotPassword = () => { |
|
|
// 处理忘记密码 |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<View style={styles.container}> |
|
|
<StatusBar barStyle="light-content" backgroundColor="#0066FF" /> |
|
|
|
|
|
{/* 顶部蓝色背景区域 */} |
|
|
<View style={styles.blueHeader}> |
|
|
<Text style={styles.logo}>brainnel</Text> |
|
|
<View style={styles.features}> |
|
|
<View style={styles.featureItem}> |
|
|
<View style={styles.featureIconContainer}> |
|
|
<Text style={styles.featureIcon}>💰</Text> |
|
|
</View> |
|
|
<Text style={styles.featureText}>{t("wholesalePrice")}</Text> |
|
|
</View> |
|
|
<View style={styles.featureItem}> |
|
|
<View style={styles.featureIconContainer}> |
|
|
<Text style={styles.featureIcon}>🚚</Text> |
|
|
</View> |
|
|
<Text style={styles.featureText}>{t("fastShipping")}</Text> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
{/* 登录区域 */} |
|
|
<View style={styles.loginContainer}> |
|
|
<TouchableOpacity style={styles.closeButton} onPress={handleClose}> |
|
|
<Text style={styles.closeButtonText}>×</Text> |
|
|
</TouchableOpacity> |
|
|
|
|
|
<View style={styles.titleContainer}> |
|
|
{/* <Text style={styles.title}>Login For brainnel</Text> */} |
|
|
<Text style={styles.subtitle}>{t("loginSubtitle")}</Text> |
|
|
</View> |
|
|
|
|
|
{/* 登录按钮 */} |
|
|
<TouchableOpacity |
|
|
style={styles.loginButton} |
|
|
onPress={handleGoogleLogin} |
|
|
> |
|
|
<View style={styles.loginButtonIcon}> |
|
|
<Image |
|
|
source={require("../../assets/img/google.png")} |
|
|
style={{ width: 20, height: 20 }} |
|
|
/> |
|
|
</View> |
|
|
<Text style={styles.loginButtonText}>{t("continueWithGoogle")}</Text> |
|
|
</TouchableOpacity> |
|
|
|
|
|
<TouchableOpacity |
|
|
style={styles.loginButton} |
|
|
onPress={handleFacebookLogin} |
|
|
> |
|
|
<View style={[styles.loginButtonIcon, styles.facebookIcon]}> |
|
|
<Text style={{ color: "#fff" }}>f</Text> |
|
|
</View> |
|
|
<Text style={styles.loginButtonText}> |
|
|
{t("continueWithFacebook")} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
|
|
|
{Platform.OS === "ios" && ( |
|
|
<TouchableOpacity |
|
|
style={styles.loginButton} |
|
|
onPress={handleAppleLogin} |
|
|
> |
|
|
<View style={[styles.loginButtonIcon, styles.appleIconBg]}> |
|
|
<Text>🍎</Text> |
|
|
</View> |
|
|
<Text style={styles.loginButtonText}>{t("continueWithApple")}</Text> |
|
|
</TouchableOpacity> |
|
|
)} |
|
|
|
|
|
<TouchableOpacity |
|
|
style={styles.loginButton} |
|
|
onPress={handleInstagramLogin} |
|
|
> |
|
|
<View style={[styles.loginButtonIcon, styles.instagramIcon]}> |
|
|
<Text>📷</Text> |
|
|
</View> |
|
|
<Text style={styles.loginButtonText}> |
|
|
{t("continueWithInstagram")} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
|
|
|
<TouchableOpacity style={styles.loginButton} onPress={handleEmailLogin}> |
|
|
<View style={styles.loginButtonIcon}> |
|
|
<Text>✉️</Text> |
|
|
</View> |
|
|
<Text style={styles.loginButtonText}>{t("continueWithEmail")}</Text> |
|
|
</TouchableOpacity> |
|
|
|
|
|
<TouchableOpacity style={styles.loginButton} onPress={handlePhoneLogin}> |
|
|
<View style={styles.loginButtonIcon}> |
|
|
<Text>📱</Text> |
|
|
</View> |
|
|
<Text style={styles.loginButtonText}>{t("continueWithPhone")}</Text> |
|
|
</TouchableOpacity> |
|
|
|
|
|
{/* 忘记密码 */} |
|
|
<TouchableOpacity |
|
|
style={styles.forgotPassword} |
|
|
onPress={handleForgotPassword} |
|
|
> |
|
|
<Text style={styles.forgotPasswordText}>{t("forgotPassword")}</Text> |
|
|
</TouchableOpacity> |
|
|
|
|
|
{/* 服务条款 */} |
|
|
<View style={styles.termsContainer}> |
|
|
<Text style={styles.terms}> |
|
|
{t("termsText")} <Text style={styles.link}>{t("termsOfUse")}</Text> |
|
|
</Text> |
|
|
<Text style={styles.terms}> |
|
|
{t("and")} <Text style={styles.link}>{t("privacyPolicy")}</Text> |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
{/* 邮箱登录面板 - 从底部滑出 */} |
|
|
{emailLoginMounted && ( |
|
|
<Animated.View |
|
|
style={[ |
|
|
styles.emailLoginContainer, |
|
|
{ |
|
|
transform: [{ translateY: emailSlideAnim }], |
|
|
opacity: emailSlideAnim.interpolate({ |
|
|
inputRange: [0, 400], |
|
|
outputRange: [1, 0.7], |
|
|
}), |
|
|
}, |
|
|
]} |
|
|
removeClippedSubviews={true} |
|
|
collapsable={false} |
|
|
> |
|
|
<View style={styles.emailLoginHeader}> |
|
|
<TouchableOpacity |
|
|
style={styles.emailLoginCloseButton} |
|
|
onPress={closeEmailLogin} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.emailLoginCloseButtonText}>✕</Text> |
|
|
</TouchableOpacity> |
|
|
<Text style={styles.emailLoginTitle}>{t("logInOrSignUp")}</Text> |
|
|
</View> |
|
|
|
|
|
<View style={styles.emailLoginContent}> |
|
|
<View style={styles.emailInputContainer}> |
|
|
<TextInput |
|
|
style={styles.emailInput} |
|
|
placeholder={t("pleaseEnterEmail")} |
|
|
value={email} |
|
|
onChangeText={(text) => { |
|
|
handleEmailChange(text); |
|
|
setEmailPasswordError(false); |
|
|
}} |
|
|
keyboardType="email-address" |
|
|
autoCapitalize="none" |
|
|
autoCorrect={false} |
|
|
autoFocus |
|
|
maxLength={50} |
|
|
/> |
|
|
{email.length > 0 && ( |
|
|
<TouchableOpacity |
|
|
style={styles.emailClearButton} |
|
|
onPress={() => { |
|
|
setEmail(""); |
|
|
setShowSuggestions(false); |
|
|
setEmailPasswordError(false); |
|
|
}} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.emailClearButtonText}>✕</Text> |
|
|
</TouchableOpacity> |
|
|
)} |
|
|
</View> |
|
|
|
|
|
{/* 邮箱后缀建议列表 */} |
|
|
{showSuggestions && ( |
|
|
<View style={styles.suggestionsContainer}> |
|
|
<FlatList |
|
|
data={suggestions.slice(0, 5)} // 限制最多显示5个建议 |
|
|
renderItem={renderSuggestionItem} |
|
|
keyExtractor={(item) => item} |
|
|
style={styles.suggestionsList} |
|
|
keyboardShouldPersistTaps="handled" |
|
|
removeClippedSubviews={true} |
|
|
initialNumToRender={5} |
|
|
maxToRenderPerBatch={5} |
|
|
windowSize={5} |
|
|
getItemLayout={(data, index) => ({ |
|
|
length: 44, |
|
|
offset: 44 * index, |
|
|
index, |
|
|
})} |
|
|
/> |
|
|
</View> |
|
|
)} |
|
|
|
|
|
{/* 密码输入框 */} |
|
|
<View |
|
|
style={[ |
|
|
styles.phoneInputContainer, |
|
|
emailPasswordError && styles.passwordErrorContainer, |
|
|
]} |
|
|
> |
|
|
<TextInput |
|
|
style={styles.passwordInput} |
|
|
placeholder={t("enterPassword")} |
|
|
value={emailPassword} |
|
|
onChangeText={(text) => { |
|
|
setEmailPassword(text); |
|
|
setEmailPasswordError(false); |
|
|
}} |
|
|
secureTextEntry={true} |
|
|
autoCapitalize="none" |
|
|
/> |
|
|
{emailPasswordError && ( |
|
|
<View style={styles.passwordErrorIcon}> |
|
|
<Text style={styles.passwordErrorIconText}>!</Text> |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
|
|
|
{/* 密码错误提示 */} |
|
|
{emailPasswordError && ( |
|
|
<> |
|
|
<Text style={styles.passwordErrorText}> |
|
|
{t("passwordIncorrect")} |
|
|
</Text> |
|
|
|
|
|
<TouchableOpacity |
|
|
style={styles.forgotPasswordLink} |
|
|
onPress={handleForgotPassword} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.forgotPasswordLinkText}> |
|
|
{t("forgotPassword")} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</> |
|
|
)} |
|
|
|
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.emailContinueButton, |
|
|
(!isValidEmail(email) || !emailPassword) && |
|
|
styles.emailDisabledButton, |
|
|
]} |
|
|
onPress={handleEmailContinue} |
|
|
disabled={!isValidEmail(email) || !emailPassword} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.emailContinueButtonText}> |
|
|
{t("continue")} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</Animated.View> |
|
|
)} |
|
|
|
|
|
{/* 手机号登录面板 - 从底部滑出 */} |
|
|
{phoneLoginMounted && ( |
|
|
<Animated.View |
|
|
style={[ |
|
|
styles.phoneLoginContainer, |
|
|
{ |
|
|
transform: [{ translateY: phoneSlideAnim }], |
|
|
opacity: phoneSlideAnim.interpolate({ |
|
|
inputRange: [0, 400], |
|
|
outputRange: [1, 0.7], |
|
|
}), |
|
|
}, |
|
|
]} |
|
|
removeClippedSubviews={true} |
|
|
collapsable={false} |
|
|
> |
|
|
<View style={styles.phoneLoginHeader}> |
|
|
<TouchableOpacity |
|
|
style={styles.phoneLoginCloseButton} |
|
|
onPress={closePhoneLogin} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.phoneLoginCloseButtonText}>✕</Text> |
|
|
</TouchableOpacity> |
|
|
<Text style={styles.phoneLoginTitle}>{t("logInOrSignUp")}</Text> |
|
|
</View> |
|
|
|
|
|
<View style={styles.phoneLoginContent}> |
|
|
<View style={styles.phoneInputContainer}> |
|
|
<TouchableOpacity |
|
|
style={styles.countrySelector} |
|
|
onPress={() => setShowCountryModal(true)} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.countryFlag}>{selectedCountry.flag}</Text> |
|
|
<Text style={styles.countryCode}> |
|
|
{selectedCountry.phoneCode} |
|
|
</Text> |
|
|
<Text style={styles.downArrow}>▼</Text> |
|
|
</TouchableOpacity> |
|
|
|
|
|
<TextInput |
|
|
style={styles.phoneInput} |
|
|
placeholder={t("phoneNumber")} |
|
|
value={phoneNumber} |
|
|
onChangeText={(text) => { |
|
|
setPhoneNumber(text); |
|
|
setPasswordError(false); |
|
|
}} |
|
|
keyboardType="phone-pad" |
|
|
autoFocus |
|
|
maxLength={15} |
|
|
/> |
|
|
{phoneNumber.length > 0 && ( |
|
|
<TouchableOpacity |
|
|
style={styles.phoneClearButton} |
|
|
onPress={() => { |
|
|
setPhoneNumber(""); |
|
|
setPasswordError(false); |
|
|
}} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.phoneClearButtonText}>✕</Text> |
|
|
</TouchableOpacity> |
|
|
)} |
|
|
</View> |
|
|
|
|
|
{/* 密码输入框 */} |
|
|
<View |
|
|
style={[ |
|
|
styles.phoneInputContainer, |
|
|
passwordError && styles.passwordErrorContainer, |
|
|
]} |
|
|
> |
|
|
<TextInput |
|
|
style={styles.passwordInput} |
|
|
placeholder={t("enterPassword")} |
|
|
value={password} |
|
|
onChangeText={(text) => { |
|
|
setPassword(text); |
|
|
setPasswordError(false); |
|
|
}} |
|
|
secureTextEntry={true} |
|
|
autoCapitalize="none" |
|
|
/> |
|
|
{passwordError && ( |
|
|
<View style={styles.passwordErrorIcon}> |
|
|
<Text style={styles.passwordErrorIconText}>!</Text> |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
|
|
|
{/* 密码错误提示 */} |
|
|
{passwordError && ( |
|
|
<> |
|
|
<Text style={styles.passwordErrorText}> |
|
|
{t("passwordIncorrect")} |
|
|
</Text> |
|
|
|
|
|
<TouchableOpacity |
|
|
style={styles.forgotPasswordLink} |
|
|
onPress={handleForgotPassword} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.forgotPasswordLinkText}> |
|
|
{t("forgotPassword")} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</> |
|
|
)} |
|
|
|
|
|
<Text |
|
|
style={[styles.phoneInfoText, passwordError && { marginTop: 5 }]} |
|
|
></Text> |
|
|
|
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.phoneContinueButton, |
|
|
(!phoneNumber.trim() || !password) && |
|
|
styles.phoneDisabledButton, |
|
|
]} |
|
|
onPress={handlePhoneContinue} |
|
|
disabled={!phoneNumber.trim() || !password} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.phoneContinueButtonText}> |
|
|
{t("continue")} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</Animated.View> |
|
|
)} |
|
|
|
|
|
{/* 国家选择模态框 */} |
|
|
<Modal |
|
|
visible={showCountryModal} |
|
|
animationType="slide" |
|
|
transparent={true} |
|
|
onRequestClose={() => setShowCountryModal(false)} |
|
|
hardwareAccelerated={true} |
|
|
statusBarTranslucent={true} |
|
|
presentationStyle="overFullScreen" |
|
|
> |
|
|
<View style={styles.countryModalContainer}> |
|
|
<View style={styles.countryModalContent}> |
|
|
<View style={styles.countryModalHeader}> |
|
|
<TouchableOpacity |
|
|
style={styles.countryModalCloseButton} |
|
|
onPress={() => setShowCountryModal(false)} |
|
|
activeOpacity={0.7} |
|
|
> |
|
|
<Text style={styles.countryModalCloseButtonText}>✕</Text> |
|
|
</TouchableOpacity> |
|
|
<Text style={styles.countryModalTitle}>{t("selectCountry")}</Text> |
|
|
</View> |
|
|
<FlatList |
|
|
data={countries} |
|
|
renderItem={renderCountryItem} |
|
|
keyExtractor={(item) => item.code} |
|
|
style={styles.countryList} |
|
|
showsVerticalScrollIndicator={false} |
|
|
removeClippedSubviews={true} |
|
|
initialNumToRender={10} |
|
|
maxToRenderPerBatch={10} |
|
|
windowSize={10} |
|
|
getItemLayout={(data, index) => ({ |
|
|
length: 69, |
|
|
offset: 69 * index, |
|
|
index, |
|
|
})} |
|
|
/> |
|
|
</View> |
|
|
</View> |
|
|
</Modal> |
|
|
</View> |
|
|
); |
|
|
}; |
|
|
|
|
|
const styles = StyleSheet.create({ |
|
|
container: { |
|
|
flex: 1, |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
closeButton: { |
|
|
position: "absolute", |
|
|
top: 15, |
|
|
left: 10, |
|
|
width: 24, |
|
|
height: 24, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
zIndex: 1, |
|
|
}, |
|
|
closeButtonText: { |
|
|
color: "#000", |
|
|
fontSize: 24, |
|
|
fontWeight: "300", |
|
|
}, |
|
|
blueHeader: { |
|
|
backgroundColor: "#0066FF", |
|
|
paddingHorizontal: 20, |
|
|
paddingBottom: 20, |
|
|
paddingTop: Platform.OS === "ios" ? 60 : 40, |
|
|
borderBottomLeftRadius: 24, |
|
|
borderBottomRightRadius: 24, |
|
|
}, |
|
|
logo: { |
|
|
fontSize: 28, |
|
|
fontWeight: "bold", |
|
|
color: "#fff", |
|
|
marginBottom: 15, |
|
|
}, |
|
|
features: { |
|
|
flexDirection: "row", |
|
|
gap: 16, |
|
|
}, |
|
|
featureItem: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
gap: 8, |
|
|
}, |
|
|
featureIconContainer: { |
|
|
backgroundColor: "rgba(255, 255, 255, 0.2)", |
|
|
borderRadius: 8, |
|
|
width: 24, |
|
|
height: 24, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
featureIcon: { |
|
|
fontSize: 12, |
|
|
}, |
|
|
featureText: { |
|
|
fontSize: 14, |
|
|
color: "#fff", |
|
|
}, |
|
|
loginContainer: { |
|
|
flex: 1, |
|
|
paddingHorizontal: 20, |
|
|
paddingTop: Platform.OS === "ios" ? 40 : 20, |
|
|
}, |
|
|
titleContainer: { |
|
|
alignItems: "center", |
|
|
marginBottom: 30, |
|
|
paddingTop: 20, |
|
|
position: "relative", |
|
|
}, |
|
|
title: { |
|
|
fontSize: 24, |
|
|
fontWeight: "bold", |
|
|
color: "#000", |
|
|
marginBottom: 8, |
|
|
textAlign: "center", |
|
|
}, |
|
|
subtitle: { |
|
|
fontSize: 14, |
|
|
color: "#666", |
|
|
textAlign: "center", |
|
|
}, |
|
|
loginButton: { |
|
|
flexDirection: "row", |
|
|
height: 50, |
|
|
borderRadius: 25, |
|
|
borderWidth: 1, |
|
|
borderColor: "#E1E1E1", |
|
|
alignItems: "center", |
|
|
marginBottom: 12, |
|
|
paddingHorizontal: 16, |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
loginButtonIcon: { |
|
|
width: 24, |
|
|
height: 24, |
|
|
borderRadius: 12, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
marginRight: 16, |
|
|
}, |
|
|
facebookIcon: { |
|
|
backgroundColor: "#3b5998", |
|
|
}, |
|
|
appleIconBg: { |
|
|
backgroundColor: "#000", |
|
|
}, |
|
|
instagramIcon: { |
|
|
backgroundColor: "#E1306C", |
|
|
}, |
|
|
loginButtonText: { |
|
|
flex: 1, |
|
|
fontSize: 16, |
|
|
color: "#000", |
|
|
textAlign: "center", |
|
|
marginRight: 16, |
|
|
}, |
|
|
forgotPassword: { |
|
|
alignItems: "center", |
|
|
marginVertical: 20, |
|
|
}, |
|
|
forgotPasswordText: { |
|
|
color: "#0066FF", |
|
|
fontSize: 14, |
|
|
}, |
|
|
termsContainer: { |
|
|
alignItems: "center", |
|
|
marginTop: 10, |
|
|
}, |
|
|
terms: { |
|
|
fontSize: 12, |
|
|
color: "#666", |
|
|
textAlign: "center", |
|
|
lineHeight: 18, |
|
|
}, |
|
|
link: { |
|
|
color: "#0066FF", |
|
|
}, |
|
|
|
|
|
// 邮箱登录样式 |
|
|
emailLoginContainer: { |
|
|
position: "absolute", |
|
|
top: Platform.OS === "ios" ? 60 : 40, |
|
|
height: Platform.OS === "ios" ? "auto" : "100%", |
|
|
bottom: 0, |
|
|
left: 0, |
|
|
right: 0, |
|
|
backgroundColor: "#fff", |
|
|
borderTopLeftRadius: 20, |
|
|
borderTopRightRadius: 20, |
|
|
shadowColor: "#000", |
|
|
shadowOffset: { width: 0, height: -2 }, |
|
|
shadowOpacity: 0.1, |
|
|
shadowRadius: 5, |
|
|
elevation: 5, |
|
|
zIndex: 10, |
|
|
}, |
|
|
emailLoginHeader: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
paddingTop: 20, |
|
|
paddingHorizontal: 16, |
|
|
paddingBottom: 15, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#f0f0f0", |
|
|
}, |
|
|
emailLoginCloseButton: { |
|
|
padding: 8, |
|
|
width: 36, |
|
|
height: 36, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
emailLoginCloseButtonText: { |
|
|
fontSize: 18, |
|
|
color: "#000", |
|
|
}, |
|
|
emailLoginTitle: { |
|
|
flex: 1, |
|
|
fontSize: 18, |
|
|
fontWeight: "600", |
|
|
color: "#000", |
|
|
textAlign: "center", |
|
|
marginRight: 36, |
|
|
}, |
|
|
emailLoginContent: { |
|
|
padding: 20, |
|
|
paddingBottom: Platform.OS === "ios" ? 50 : 30, |
|
|
flex: 1, |
|
|
}, |
|
|
emailInputContainer: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
borderWidth: 1, |
|
|
borderColor: "#E1E1E1", |
|
|
borderRadius: 25, |
|
|
height: 50, |
|
|
marginBottom: 20, |
|
|
}, |
|
|
emailInput: { |
|
|
flex: 1, |
|
|
height: "100%", |
|
|
paddingHorizontal: 16, |
|
|
fontSize: 16, |
|
|
paddingRight: 36, |
|
|
}, |
|
|
emailClearButton: { |
|
|
position: "absolute", |
|
|
right: 12, |
|
|
top: "50%", |
|
|
transform: [{ translateY: -12 }], |
|
|
height: 24, |
|
|
width: 24, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
emailClearButtonText: { |
|
|
fontSize: 16, |
|
|
color: "#999", |
|
|
fontWeight: "500", |
|
|
textAlign: "center", |
|
|
}, |
|
|
suggestionsContainer: { |
|
|
borderWidth: 1, |
|
|
borderColor: "#E1E1E1", |
|
|
borderRadius: 10, |
|
|
marginTop: -10, |
|
|
marginBottom: 20, |
|
|
maxHeight: 200, |
|
|
backgroundColor: "#fff", |
|
|
}, |
|
|
suggestionsList: { |
|
|
padding: 8, |
|
|
}, |
|
|
suggestionItem: { |
|
|
paddingVertical: 12, |
|
|
paddingHorizontal: 16, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#F0F0F0", |
|
|
}, |
|
|
suggestionText: { |
|
|
fontSize: 16, |
|
|
color: "#333", |
|
|
}, |
|
|
emailContinueButton: { |
|
|
height: 50, |
|
|
backgroundColor: "#0039CB", |
|
|
borderRadius: 25, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
marginTop: 20, |
|
|
}, |
|
|
emailDisabledButton: { |
|
|
backgroundColor: "#CCCCCC", |
|
|
}, |
|
|
emailContinueButtonText: { |
|
|
color: "#fff", |
|
|
fontSize: 16, |
|
|
fontWeight: "600", |
|
|
}, |
|
|
|
|
|
// 手机号登录样式 |
|
|
phoneLoginContainer: { |
|
|
position: "absolute", |
|
|
top: Platform.OS === "ios" ? 60 : 40, |
|
|
height: Platform.OS === "ios" ? "auto" : "100%", |
|
|
bottom: 0, |
|
|
left: 0, |
|
|
right: 0, |
|
|
backgroundColor: "#fff", |
|
|
borderTopLeftRadius: 20, |
|
|
borderTopRightRadius: 20, |
|
|
shadowColor: "#000", |
|
|
shadowOffset: { width: 0, height: -2 }, |
|
|
shadowOpacity: 0.1, |
|
|
shadowRadius: 5, |
|
|
elevation: 5, |
|
|
zIndex: 10, |
|
|
}, |
|
|
phoneLoginHeader: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
paddingTop: 20, |
|
|
paddingHorizontal: 16, |
|
|
paddingBottom: 15, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#f0f0f0", |
|
|
}, |
|
|
phoneLoginCloseButton: { |
|
|
padding: 8, |
|
|
width: 36, |
|
|
height: 36, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
phoneLoginCloseButtonText: { |
|
|
fontSize: 18, |
|
|
color: "#000", |
|
|
}, |
|
|
phoneLoginTitle: { |
|
|
flex: 1, |
|
|
fontSize: 18, |
|
|
fontWeight: "600", |
|
|
color: "#000", |
|
|
textAlign: "center", |
|
|
marginRight: 36, |
|
|
}, |
|
|
phoneLoginContent: { |
|
|
padding: 20, |
|
|
paddingBottom: Platform.OS === "ios" ? 50 : 30, |
|
|
flex: 1, |
|
|
}, |
|
|
phoneInputContainer: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
borderWidth: 1, |
|
|
borderColor: "#E1E1E1", |
|
|
borderRadius: 25, |
|
|
height: 50, |
|
|
marginBottom: 20, |
|
|
position: "relative", |
|
|
}, |
|
|
countrySelector: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
paddingHorizontal: 12, |
|
|
borderRightWidth: 1, |
|
|
borderRightColor: "#E1E1E1", |
|
|
backgroundColor: "#F7F7F7", |
|
|
height: "100%", |
|
|
minWidth: 90, |
|
|
width: 90, |
|
|
justifyContent: "center", |
|
|
}, |
|
|
countryFlag: { |
|
|
fontSize: 18, |
|
|
marginRight: 4, |
|
|
}, |
|
|
countryCode: { |
|
|
fontSize: 12, |
|
|
color: "#333", |
|
|
marginRight: 4, |
|
|
}, |
|
|
downArrow: { |
|
|
fontSize: 8, |
|
|
color: "#666", |
|
|
}, |
|
|
phoneInput: { |
|
|
flex: 1, |
|
|
height: "100%", |
|
|
paddingHorizontal: 16, |
|
|
fontSize: 16, |
|
|
paddingRight: 36, |
|
|
}, |
|
|
phoneClearButton: { |
|
|
position: "absolute", |
|
|
right: 12, |
|
|
top: "50%", |
|
|
transform: [{ translateY: -12 }], |
|
|
height: 24, |
|
|
width: 24, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
phoneClearButtonText: { |
|
|
fontSize: 16, |
|
|
color: "#999", |
|
|
fontWeight: "500", |
|
|
textAlign: "center", |
|
|
}, |
|
|
phoneInfoText: { |
|
|
fontSize: 14, |
|
|
color: "#666", |
|
|
marginBottom: 32, |
|
|
lineHeight: 20, |
|
|
}, |
|
|
phoneContinueButton: { |
|
|
height: 50, |
|
|
backgroundColor: "#0039CB", |
|
|
borderRadius: 25, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
phoneDisabledButton: { |
|
|
backgroundColor: "#CCCCCC", |
|
|
}, |
|
|
phoneContinueButtonText: { |
|
|
color: "#fff", |
|
|
fontSize: 16, |
|
|
fontWeight: "600", |
|
|
}, |
|
|
|
|
|
// 国家选择模态框样式 |
|
|
countryModalContainer: { |
|
|
flex: 1, |
|
|
backgroundColor: "rgba(0,0,0,0.5)", |
|
|
justifyContent: "flex-end", |
|
|
zIndex: 999, |
|
|
}, |
|
|
countryModalContent: { |
|
|
backgroundColor: "#fff", |
|
|
borderTopLeftRadius: 20, |
|
|
borderTopRightRadius: 20, |
|
|
maxHeight: "80%", |
|
|
zIndex: 1000, |
|
|
}, |
|
|
countryModalHeader: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
padding: 16, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#E5E5E5", |
|
|
}, |
|
|
countryModalCloseButton: { |
|
|
padding: 4, |
|
|
}, |
|
|
countryModalCloseButtonText: { |
|
|
fontSize: 18, |
|
|
color: "#999", |
|
|
}, |
|
|
countryModalTitle: { |
|
|
flex: 1, |
|
|
fontSize: 18, |
|
|
fontWeight: "600", |
|
|
textAlign: "center", |
|
|
marginRight: 24, |
|
|
}, |
|
|
countryList: { |
|
|
padding: 8, |
|
|
}, |
|
|
countryItem: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
padding: 16, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: "#F0F0F0", |
|
|
}, |
|
|
countryItemFlag: { |
|
|
fontSize: 24, |
|
|
marginRight: 16, |
|
|
}, |
|
|
countryItemContent: { |
|
|
flex: 1, |
|
|
}, |
|
|
countryItemName: { |
|
|
fontSize: 16, |
|
|
color: "#333", |
|
|
}, |
|
|
countryItemCode: { |
|
|
fontSize: 14, |
|
|
color: "#666", |
|
|
marginTop: 4, |
|
|
}, |
|
|
// 密码输入框样式 |
|
|
passwordInput: { |
|
|
flex: 1, |
|
|
height: "100%", |
|
|
paddingHorizontal: 16, |
|
|
fontSize: 16, |
|
|
}, |
|
|
passwordErrorContainer: { |
|
|
borderColor: "#FF3B30", |
|
|
}, |
|
|
passwordErrorIcon: { |
|
|
position: "absolute", |
|
|
right: 12, |
|
|
top: "50%", |
|
|
transform: [{ translateY: -12 }], |
|
|
width: 24, |
|
|
height: 24, |
|
|
backgroundColor: "#FF3B30", |
|
|
borderRadius: 12, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
passwordErrorIconText: { |
|
|
color: "white", |
|
|
fontWeight: "bold", |
|
|
fontSize: 16, |
|
|
}, |
|
|
passwordErrorText: { |
|
|
color: "#FF3B30", |
|
|
fontSize: 14, |
|
|
marginTop: -12, |
|
|
marginBottom: 16, |
|
|
paddingHorizontal: 5, |
|
|
}, |
|
|
forgotPasswordLink: { |
|
|
alignItems: "center", |
|
|
marginTop: 5, |
|
|
}, |
|
|
forgotPasswordLinkText: { |
|
|
color: "#0066FF", |
|
|
fontSize: 14, |
|
|
}, |
|
|
});
|
|
|
|
