DingdongRider/login/ApplyLocationScreen.tsx

import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { useCreation } from 'ahooks';
import useModel from 'flooks';
import { useTranslation } from 'react-i18next';

import Login from './model';
import User from '../stores/User';

export default function ApplyLocationScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();
  const { applyInfo, saveRiderApply } = useModel(Login, ['applyInfo']);
  const { area, longitude, latitude } = applyInfo;
  const { riderInfo } = useModel(User, ['riderInfo']);
  const canSubmit = useCreation(() => {
    if (area && longitude && latitude) {
      return true;
    } else {
      return false;
    }
  }, [area, longitude, latitude]);

  return (
    <Div bg="gray100" flex={1}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#fff',
        }}
      >
        <Div borderTopWidth={10} borderColor="gray100" px={15}>
          <Div row py={10} overflow="hidden" alignItems="center">
            <Text w={120} textAlign="right">
              {t('gong-zuo-di-dian')}：
            </Text>

            <Button
              flex={1}
              bg="gray100"
              color="black"
              justifyContent="space-around"
              ml={10}
              onPress={() => navigation.navigate('SearchMap')}
            >
              <Div flex={1}>
                <Text fontSize="sm" color={area ? 'black' : 'gray300'}>
                  {area || t('qing-xuan-ze-di-dian')}
                </Text>
              </Div>
            </Button>
            <Icon name="right" ml="md" />
          </Div>
        </Div>
        <Div alignSelf="center" py={20}>
          <Text fontSize="sm" color="gray400">
            {t('shuo-ming')}：
          </Text>
          <Text fontSize="sm" color="gray400">
            {t(
              'qi-shou-de-gong-zuo-qu-yu-wei-yi-gong-zuo-di-dian-ban-jing-3km-de-qu-yu'
            )}
          </Text>
        </Div>

        <Button
          w={112}
          bg="yellow500"
          alignSelf="center"
          fontSize="sm"
          my={20}
          // disabled={!canSubmit}
          onPress={saveRiderApply}
        >
          {t('ti-jiao-shen-he')}
        </Button>
      </ScrollView>
    </Div>
  );
}