rn-app/views/Login/index.jsx

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 { useNavigation, useIsFocused } from '@react-navigation/native';
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 [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [showPassword, setShowPassword] = useState(false);

  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={[{ 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>
      <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_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>
  );
};
export default LoginScreen;