DingdongRider/login/LoginScreen.tsx

import { StackScreenProps } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Input } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { TextInputMask } from 'react-native-masked-text';
import { useMount } from 'ahooks';
import { useNavigation } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import useModel from 'flooks';

import { MainStackParamList, LoginTabParamList } from '../types';
import Navigation from '../navigation';

import Login from './model';

const LoginTab = createMaterialTopTabNavigator<LoginTabParamList>();

export default function LoginScreen({
  navigation,
}: StackScreenProps<MainStackParamList, 'Login'>) {
  const { t } = useTranslation();
  return (
    <Div flex={1} bg="yellow200">
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#FFF2C7',
          justifyContent: 'center',
        }}
        keyboardDismissMode="on-drag"
      >
        <Div bg="white" mx={13} px={10} py={20} rounded="xs">
          <Image
            source={require('../assets/images/loginImg2.png')}
            alignSelf="center"
            w={217}
            h={100}
          />

          <Image
            source={require('../assets/images/loginImg.png')}
            w={275}
            h={60}
            position="absolute"
            top={-59}
            left="50%"
            ml={-137}
            zIndex={2}
          />

          <Div bg="white">
            <LoginTab.Navigator
              initialRouteName="Psd"
              tabBarOptions={{
                inactiveTintColor: '#000',
                activeTintColor: '#FFC21C',
                indicatorStyle: { height: 0 },
                labelStyle: { fontSize: 13 },
              }}
            >
              <LoginTab.Screen
                name="Psd"
                component={LoginByPsd}
                options={{
                  title: t('mi-ma-deng-lu'),
                  backgroundColor: '#fff',
                }}
              />
              <LoginTab.Screen
                name="Code"
                component={LoginByCode}
                options={{
                  title: t('yan-zheng-ma-deng-lu'),
                }}
              />
            </LoginTab.Navigator>
          </Div>
        </Div>
      </ScrollView>
    </Div>
  );
}

function LoginByPsd() {
  const { t } = useTranslation();
  const [phone, setphone] = React.useState<string>('');
  const [password, setpassword] = React.useState<string>('');
  const navigation = useNavigation();

  const loginModel = useModel(Login, []);

  return (
    <Div bg="white">
      <Div row alignItems="center" py={10}>
        <Text w={96} textAlign="right">
          {t('shou-ji-hao')}：
        </Text>
        <Div
          flex={1}
          bg="gray100"
          rounded="sm"
          px={15}
          ml={5}
          h={30}
          alignItems="stretch"
        >
          <TextInputMask
            type={'custom'}
            value={phone}
            keyboardType="numeric"
            options={{
              mask: '999 9999 9999',
            }}
            onChangeText={(text) => {
              console.log(text);
              setphone(text);
            }}
            style={{ flex: 1, fontSize: 14 }}
            placeholderTextColor="#a6a6a6"
            placeholder={t('shu-ru-shang-jia-ming-cheng')}
          />
        </Div>
      </Div>
      <Div row alignItems="center" py={10}>
        <Text w={96} textAlign="right">
          {t('mi-ma')}：
        </Text>
        <Input
          flex={1}
          bg="gray100"
          rounded="sm"
          px={15}
          ml={5}
          h={30}
          type={'custom'}
          value={password}
          borderWidth={0}
          fontSize="md"
          opacity={1}
          loaderColor="gray400"
          color="gray900"
          secureTextEntry
          onChangeText={(text) => {
            console.log(text);
            setpassword(text);
          }}
          style={{ flex: 1 }}
          placeholder={t('shu-ru-mi-ma')}
        />
      </Div>

      <Div row justifyContent="space-between" pl={90}>
        <Button
          color="gray400"
          fontSize="sm"
          bg="white"
          onPress={() => navigation.navigate('ForgetPsd')}
        >
          {t('wang-ji-mi-ma')}
        </Button>
        <Button
          color="gray400"
          fontSize="sm"
          bg="white"
          onPress={() => navigation.navigate('Register')}
        >
          {t('qi-shou-zhu-ce')}
        </Button>
      </Div>

      <Button
        block
        bg="yellow500"
        w={112}
        fontSize="sm"
        ml={96}
        mt={10}
        onPress={() => {
          loginModel.loginByPsd();
        }}
      >
        {t('deng-lu')}
      </Button>
    </Div>
  );
}

function LoginByCode() {
  const { t } = useTranslation();
  const [phone, setphone] = React.useState<string>('');
  const [code, setCode] = React.useState<string>('');
  return (
    <Div bg="white">
      <Div row alignItems="center" py={10}>
        <Text w={96} textAlign="right">
          {t('shou-ji-hao')}：
        </Text>
        <Div
          flex={1}
          bg="gray100"
          rounded="sm"
          px={15}
          ml={5}
          h={30}
          alignItems="stretch"
        >
          <TextInputMask
            type={'custom'}
            value={phone}
            keyboardType="numeric"
            options={{
              mask: '999 9999 9999',
            }}
            onChangeText={(text) => {
              console.log(text);
              setphone(text);
            }}
            placeholderTextColor="#a6a6a6"
            style={{ flex: 1, fontSize: 14 }}
            placeholder={t('shu-ru-shou-ji-hao')}
          />
        </Div>
      </Div>
      <Div row alignItems="center" py={10}>
        <Text w={96} textAlign="right">
          {t('yan-zheng-ma')}：
        </Text>
        <Div
          flex={1}
          bg="gray100"
          rounded="sm"
          px={15}
          ml={5}
          h={30}
          alignItems="stretch"
        >
          <TextInputMask
            type={'custom'}
            value={code}
            keyboardType="numeric"
            options={{
              mask: '9999',
            }}
            onChangeText={(text) => {
              console.log(text);
              setCode(text);
            }}
            placeholderTextColor="#a6a6a6"
            style={{ flex: 1, fontSize: 14 }}
            placeholder={t('shu-ru-yan-zheng-ma')}
          />
        </Div>
      </Div>

      <Div row justifyContent="space-between" pl={90}>
        <Button color="gray400" fontSize="sm" bg="white">
          {t('wang-ji-mi-ma')}
        </Button>
        <Button color="gray400" fontSize="sm" bg="white">
          {t('qi-shou-zhu-ce')}
        </Button>
      </Div>

      <Button block bg="yellow500" w={112} fontSize="sm" ml={96} mt={10}>
        {t('deng-lu')}
      </Button>
    </Div>
  );
}