DingdongRider/mine/SettingScreen.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 { useTranslation } from 'react-i18next';

import useModel from 'flooks';
import User from '../stores/User';

import { alert } from '../utils/SystemUtils';

export default function SettingScreen({ navigation }: StackScreenProps) {
  const { t, i18n } = useTranslation();

  const { logout } = useModel(User, []);
  return (
    <Div bg="gray100">
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
      >
        <Button
          bg="white"
          px={12}
          h={52}
          py={0}
          block
          mt={10}
          rounded="none"
          onPress={() => {
            navigation.navigate('SettingSys');
          }}
        >
          <Div row justifyContent="space-between" flex={1}>
            <Text fontSize="sm">{t('tong-zhi-he-ti-shi-yin-she-zhi')}</Text>
            <Icon name="right" />
          </Div>
        </Button>
        <Button bg="white" px={12} h={52} py={0} block mt={10} rounded="none">
          <Div row justifyContent="space-between" flex={1}>
            <Text fontSize="sm">
              {t('ding-dong-wai-mai-qi-shou-zhu-ce-xie-yi')}
            </Text>
            <Icon name="right" />
          </Div>
        </Button>
        <Button bg="white" px={12} h={52} py={0} block mt={10} rounded="none">
          <Div row justifyContent="space-between" flex={1}>
            <Text fontSize="sm">
              {t('ding-dong-wai-mai-qi-shou-yin-si-zheng-ce')}
            </Text>
            <Icon name="right" />
          </Div>
        </Button>
        <Button bg="white" px={12} h={52} py={0} block mt={10} rounded="none">
          <Div row justifyContent="space-between" flex={1}>
            <Text fontSize="sm">{t('qi-shou-fu-wu-he-zuo-xie-yi')}</Text>
            <Icon name="right" />
          </Div>
        </Button>

        <Button
          bg="white"
          px={12}
          h={52}
          py={0}
          block
          mt={10}
          rounded="none"
          onPress={() => {
            const languages = ['zh', 'en', 'th'];
            console.log(i18n.languages);
            const index = languages.findIndex((item) => {
              return i18n.languages.indexOf(item) != -1;
            });
            console.log(index);
            i18n.changeLanguage(languages[(index + 1) % 3]);
          }}
        >
          <Div row justifyContent="space-between" flex={1}>
            <Text fontSize="sm">当前语言为{i18n.language}</Text>
            <Icon name="right" />
          </Div>
        </Button>

        <Button
          // w={112}
          minW={112}
          bg="white"
          color="black"
          borderWidth={1}
          borderColor="yellow500"
          fontSize="sm"
          alignSelf="center"
          my={30}
          onPress={() => {
            alert(navigation, {
              msg: t('que-ren-yao-tui-chu-dang-qian-zhang-hao-ma'),
              hasCancel: true,
              submitEvent: () => logout(),
            });
          }}
        >
          {t('tui-chu-dang-qian-zhang-hu')}
        </Button>
      </ScrollView>
    </Div>
  );
}