rn-app/views/AccountInfo/index.jsx

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;