国际化文件导入

.eslintrc.json

@@ -19,7 +19,7 @@
     "no-else-return": 0,
     "import/no-unresolved": 0,
     "no-unused-vars": [
-      "error",
+      0,
       { "vars": "local", "varsIgnorePattern": "WebBrowser" }
     ],
     "no-nested-ternary": 0,

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+	"react-i18n.i18nPaths": "locales",
+	"i18n-ally.localesPaths": [
+		"language",
+		"locales"
+	],
+	"i18n-ally.keystyle": "nested"
+}

App.js

@@ -6,6 +6,7 @@ import {
   CardStyleInterpolators,
 } from '@react-navigation/stack';
 import { UseAPIProvider } from '@umijs/use-request';
+import './i18n'; // 在这里导入 i18n.js
 
 import { Provider as PaperProvider } from 'react-native-paper';
 import { Provider } from '@ant-design/react-native';
@@ -18,7 +19,6 @@ import { navigationRef } from './navigation/RootNavigation';
 import useCachedResources from './hooks/useCachedResources';
 import BottomTabNavigator from './navigation/BottomTabNavigator';
 import BasicScreens from './navigation/BaseNavigator';
-import words from './flooks/Words';
 import Toast from './flooks/Toast';
 import user from './flooks/User';
 import request from './Utils/RequestUtils';
@@ -31,11 +31,6 @@ export default function App() {
   const isLoadingComplete = useCachedResources();
   // 初始化 Toast
   useModel(Toast, []);
-  const { wordsInit, local } = useModel(words, ['local']);
-  // Load words  local语言转变，切换语言
-  React.useEffect(() => {
-    wordsInit();
-  }, [local]);
   const { id } = useModel(user, ['id']);
   useUpdateEffect(() => {
     let initName = '';

Utils/MerchantUtils.js

@@ -1,58 +1,60 @@
+import i18n from '../i18n';
+
 const sortMap = new Map([
   [
     '',
     {
-      name: '综合排序',
+      name: i18n.t('zong-he-pai-xu'),
       showType: 'sort',
     },
   ],
   [
     '1',
     {
-      name: '好评优先',
+      name: i18n.t('hao-ping-you-xian'),
     },
   ],
   [
     '2',
     {
-      name: '起送费最低',
+      name: i18n.t('qi-song-fei-zui-di'),
     },
   ],
   [
     '3',
     {
-      name: '配送最快',
+      name: i18n.t('pei-song-zui-kuai'),
     },
   ],
   [
     '4',
     {
-      name: '配送费最低',
+      name: i18n.t('pei-song-fei-zui-di'),
     },
   ],
   [
     '5',
     {
-      name: '人均最低',
+      name: i18n.t('ren-jun-zui-di'),
     },
   ],
   [
     '6',
     {
-      name: '人均最高',
+      name: i18n.t('ren-jun-zui-gao'),
     },
   ],
   [
     '7',
     {
-      name: '距离',
+      name: i18n.t('ju-li'),
       showType: 'top',
     },
   ],
   [
     '8',
     {
-      name: '销量',
+      name: i18n.t('xiao-liang'),
       showType: 'top',
     },
   ],
@@ -61,23 +63,23 @@ const tagMap = new Map([
   [
     '1',
     {
-      name: '新商家',
+      name: i18n.t('xin-shang-jia'),
     },
   ],
   [
     '2',
     {
-      name: '明星商家',
+      name: i18n.t('ming-xing-shang-jia'),
     },
   ],
 ]);
 
 const filterMap = new Map([
-  ['1', { name: '首单立减' }],
-  ['2', { name: '满减优惠' }],
-  ['3', { name: '折扣商家' }],
-  ['4', { name: '下单返红包' }],
-  ['5', { name: '可用红包' }],
+  ['1', { name: i18n.t('shou-dan-li-jian') }],
+  ['2', { name: i18n.t('man-jian-you-hui') }],
+  ['3', { name: i18n.t('zhe-kou-shang-jia') }],
+  ['4', { name: i18n.t('xia-dan-fan-hong-bao') }],
+  ['5', { name: i18n.t('ke-yong-hong-bao') }],
 ]);
 
 export { sortMap, tagMap, filterMap };

Utils/OrderUtils.js

@@ -1,10 +1,11 @@
 // 权重大的在前面显示 基础是-1在最后
+import i18n from '../i18n';
 
 const merchantStatusMap = new Map([
   [
     'NOT_RECEIVED',
     {
-      name: '待商家接单',
+      name: i18n.t('dai-shang-jia-jie-dan'),
       sort: 0,
       type: 'merchant',
       nowImgType: 'merchant',
@@ -13,7 +14,7 @@ const merchantStatusMap = new Map([
   [
     'RECEIVED',
     {
-      name: '商家已接单',
+      name: i18n.t('shang-jia-yi-jie-dan'),
       sort: 0,
       type: 'merchant',
       nowImgType: 'merchant',
@@ -22,7 +23,7 @@ const merchantStatusMap = new Map([
   [
     'REJECTED',
     {
-      name: '商家已退单',
+      name: i18n.t('shang-jia-yi-tui-dan'),
       sort: -1,
       type: 'merchant',
     },
@@ -30,7 +31,7 @@ const merchantStatusMap = new Map([
   [
     'COMPLETED',
     {
-      name: '已完成',
+      name: i18n.t('yi-wan-cheng'),
       sort: -1,
       type: 'merchant',
     },
@@ -41,7 +42,7 @@ const orderStatusMap = new Map([
   [
     'UNPAID',
     {
-      name: '订单未支付',
+      name: i18n.t('ding-dan-wei-zhi-fu'),
       sort: 1,
       type: 'order',
     },
@@ -49,7 +50,7 @@ const orderStatusMap = new Map([
   [
     'PAID',
     {
-      name: '用户已支付',
+      name: i18n.t('yong-hu-yi-zhi-fu'),
       sort: -1,
       type: 'order',
     },
@@ -57,7 +58,7 @@ const orderStatusMap = new Map([
   [
     'RATED',
     {
-      name: '待评价',
+      name: i18n.t('dai-ping-jia'),
       sort: 0,
       type: 'order',
     },
@@ -65,7 +66,7 @@ const orderStatusMap = new Map([
   [
     'CANCELLED',
     {
-      name: '订单已取消',
+      name: i18n.t('ding-dan-yi-qu-xiao'),
       sort: 2,
       type: 'order',
     },
@@ -73,7 +74,7 @@ const orderStatusMap = new Map([
   [
     'REFUNDED_PENDING',
     {
-      name: '申请退款中',
+      name: i18n.t('shen-qing-tui-kuan-zhong'),
       sort: -1,
       type: 'order',
     },
@@ -81,7 +82,7 @@ const orderStatusMap = new Map([
   [
     'REFUNDING',
     {
-      name: '退款中',
+      name: i18n.t('tui-kuan-zhong'),
       sort: -1,
       type: 'order',
     },
@@ -89,7 +90,7 @@ const orderStatusMap = new Map([
   [
     'REFUNDED',
     {
-      name: '已退款',
+      name: i18n.t('yi-tui-kuan'),
       sort: -1,
       type: 'order',
     },
@@ -97,7 +98,7 @@ const orderStatusMap = new Map([
   [
     'COMPLETED',
     {
-      name: '已完成',
+      name: i18n.t('yi-wan-cheng'),
       sort: 2,
       type: 'order',
     },
@@ -108,7 +109,7 @@ const RiderStatusMap = new Map([
   [
     'NOT_RECEIVED',
     {
-      name: '待骑手接单',
+      name: i18n.t('dai-qi-shou-jie-dan'),
       sort: -1,
       type: 'rider',
     },
@@ -116,7 +117,7 @@ const RiderStatusMap = new Map([
   [
     'RECEIVED',
     {
-      name: '骑手已接单',
+      name: i18n.t('qi-shou-yi-jie-dan'),
       sort: 1,
       type: 'rider',
       nowImgType: 'rider',
@@ -125,7 +126,7 @@ const RiderStatusMap = new Map([
   [
     'TAKE_MEAL',
     {
-      name: '骑手已取餐',
+      name: i18n.t('qi-shou-yi-qu-can'),
       sort: 1,
       type: 'rider',
       nowImgType: 'rider',
@@ -134,7 +135,7 @@ const RiderStatusMap = new Map([
   [
     'MEAL_DELIVERY',
     {
-      name: '订单正在配送中',
+      name: i18n.t('ding-dan-zheng-zai-pei-song-zhong'),
       sort: 1,
       type: 'rider',
       nowImgType: 'rider',
@@ -143,7 +144,7 @@ const RiderStatusMap = new Map([
   [
     'CARRY_OUT',
     {
-      name: '订单已送达',
+      name: i18n.t('ding-dan-yi-song-da'),
       sort: 1,
       type: 'rider',
     },
@@ -154,7 +155,7 @@ const payMap = new Map([
   [
     'ALI_PAY',
     {
-      name: '支付宝',
+      name: i18n.t('zhi-fu-bao'),
       icon: 'alipay-square',
       iconColor: 'blue500',
     },
@@ -162,7 +163,7 @@ const payMap = new Map([
   [
     'CASH_DELIVERY',
     {
-      name: '货到付款',
+      name: i18n.t('huo-dao-fu-kuan'),
       icon: 'wallet',
       iconColor: 'green500',
     },
@@ -170,7 +171,7 @@ const payMap = new Map([
   [
     'CREDIT_CARD',
     {
-      name: '信用卡',
+      name: i18n.t('xin-yong-ka'),
       icon: 'creditcard',
       iconColor: 'red500',
     },
@@ -196,23 +197,41 @@ function getStatusInfo(orderInfo) {
     })[0];
   } else {
     return {
-      name: '订单详情',
+      name: i18n.t('ding-dan-xiang-qing'),
     };
   }
 }
 
 const reasonMap = new Map([
-  ['UNABLE_TO_DELIVER', { name: '当前订单无法配送' }],
-  ['DELIVERY_TIME_IS_TOO_LONG', { name: '配送时间太长' }],
-  ['ADDRESS_IS_INCORRECT', { name: '地址填写错误' }],
-  ['MERCHANT_CANNOT_DELIVER', { name: '商家无法送达，联系我取消' }],
-  ['MERCHANT_OUT_OF_STOCK', { name: '商家缺货/打烊，联系我取消' }],
-  ['FORGOT_TO_USE_THE_RED_ENVELOPE', { name: '忘记使用红包' }],
-  ['FORGET_ABOUT_STAPLE_FOOD', { name: '忘点主食' }],
-  ['RIDER_CONTACT_ME_TO_CANCEL', { name: '骑手联系我取消' }],
-  ['MORE_POINTS', { name: '点多了/点错了/漏点了' }],
-  ['RIDER_CANNOT_REACH_USER', { name: '临时有事不想要了' }],
-  ['OTHER', { name: '其他原因' }],
+  ['UNABLE_TO_DELIVER', { name: i18n.t('dang-qian-ding-dan-wu-fa-pei-song') }],
+  [
+    'DELIVERY_TIME_IS_TOO_LONG',
+    { name: i18n.t('pei-song-shi-jian-tai-chang') },
+  ],
+  ['ADDRESS_IS_INCORRECT', { name: i18n.t('di-zhi-tian-xie-cuo-wu') }],
+  [
+    'MERCHANT_CANNOT_DELIVER',
+    { name: i18n.t('shang-jia-wu-fa-song-da-lian-xi-wo-qu-xiao') },
+  ],
+  [
+    'MERCHANT_OUT_OF_STOCK',
+    { name: i18n.t('shang-jia-que-huo-da-yang-lian-xi-wo-qu-xiao') },
+  ],
+  [
+    'FORGOT_TO_USE_THE_RED_ENVELOPE',
+    { name: i18n.t('wang-ji-shi-yong-hong-bao') },
+  ],
+  ['FORGET_ABOUT_STAPLE_FOOD', { name: i18n.t('wang-dian-zhu-shi') }],
+  [
+    'RIDER_CONTACT_ME_TO_CANCEL',
+    { name: i18n.t('qi-shou-lian-xi-wo-qu-xiao') },
+  ],
+  ['MORE_POINTS', { name: i18n.t('dian-duo-le-dian-cuo-le-lou-dian-le') }],
+  [
+    'RIDER_CANNOT_REACH_USER',
+    { name: i18n.t('lin-shi-you-shi-bu-xiang-yao-le') },
+  ],
+  ['OTHER', { name: i18n.t('qi-ta-yuan-yin') }],
 ]);
 export {
   merchantStatusMap,

Utils/TotastUtils.js

@@ -4,25 +4,26 @@ import React from 'react';
 import { Modal } from '@ant-design/react-native';
 import { Text } from 'react-native-magnus';
 import * as Linking from 'expo-linking';
+import i18n from '../i18n';
 
 import { navigate } from '../navigation/RootNavigation';
 
 export function alert(title, content, submitEvent) {
   Modal.alert(
     <Text textAlign="center" fontWeight="bold">
-      {title || '提示'}
+      {title || i18n.t('ti-shi')}
     </Text>,
     <Text fontSize="sm" color="red500" textAlign="center">
       {content}
     </Text>,
     [
       {
-        text: '取消',
+        text: i18n.t('qu-xiao'),
         onPress: () => console.log('cancel'),
         style: { color: '#000', fontSize: 12, lineHeight: 30 },
       },
       {
-        text: '确定',
+        text: i18n.t('que-ding'),
         onPress: () => {
           if (submitEvent) {
             submitEvent();
@@ -50,7 +51,7 @@ export function alertWithoutCancel(title, content, isError, submitEvent) {
     </Text>,
     [
       {
-        text: '确定',
+        text: i18n.t('que-ding'),
         onPress: () => {
           if (submitEvent) {
             submitEvent();
@@ -72,17 +73,16 @@ export function connectKefu(orderId) {
   Modal.alert(
     '',
     <Text style={{ marginHorizontal: 15 }} more>
-      感谢您对我们的信任，我们将竭尽所能
-      的为您解决问题。您的每一个建议和反馈都对我们至关重要
+      {i18n.t('tips9')}
     </Text>,
     [
       {
-        text: '客服电话',
+        text: i18n.t('ke-fu-dian-hua'),
         onPress: connectKefuOn,
         style: { color: '#000', fontSize: 12, lineHeight: 30 },
       },
       {
-        text: '我要投诉',
+        text: i18n.t('wo-yao-tou-su'),
         onPress: () => {
           navigate('Complaint', { orderId });
         },

app.json

@@ -2,11 +2,7 @@
   "expo": {
     "name": "叮咚外卖用户端",
     "slug": "DingdongClient",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "platforms": ["ios", "android", "web"],
     "version": "1.0.1",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
@@ -21,13 +17,11 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.izouma.dingdongClient",
-      "buildNumber": "1.0.0"
+      "buildNumber": "1.0.1"
     },
     "android": {
       "package": "com.izouma.dingdongClient",

components/HomeHeader.js

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { StatusBar } from 'expo-status-bar';
-import { Appbar, Menu } from 'react-native-paper';
-import { useBoolean } from '@umijs/hooks';
-import { Icon, Text, Button, Div } from 'react-native-magnus';
-
-import useModel from 'flooks';
-import words from '../flooks/Words';
-import user from '../flooks/User';
-
-export default function Header() {
-  const { state, setTrue, setFalse } = useBoolean(false);
-  const {
-    setlocal,
-    TlocationWord,
-    TchangeToth,
-    TchangeToChinese,
-    local,
-  } = useModel(words);
-  const { logout } = useModel(user, []);
-
-  const [location, setLocation] = React.useState();
-  console.log(location);
-  function locationEvent() {
-    getLocation().then((res) => {
-      // console.log(res);
-      setLocation(res);
-    });
-  }
-
-  return (
-    <>
-      <StatusBar backgroundColor="transparent" style="dark" translucent />
-
-      <Appbar.Header
-        statusBarHeight={0}
-        theme={{ colors: { primary: '#fff' } }}
-        style={{
-          elevation: 0,
-          shadowOffset: {
-            width: 0,
-            height: 0,
-          },
-          shadowOpacity: 0,
-          zIndex: 2,
-        }}
-      >
-        <Button onPress={locationEvent} block bg="hiden" p={0} flex={1}>
-          <Div flex={1} row color="brand500">
-            <Icon
-              name="navigation"
-              // color="brand500"
-              fontFamily="Feather"
-              ml={15}
-            />
-            <Text
-              numberOfLines={2}
-              ellipsizeMode="tail"
-              fontSize="xl"
-              ml={5}
-              fontWeight="bold"
-              flex={1}
-            >
-              {location ? location.addressName : ''}
-            </Text>
-          </Div>
-        </Button>
-
-        <Menu
-          visible={state}
-          onDismiss={setFalse}
-          anchor={<Appbar.Action icon="dots-vertical" onPress={setTrue} />}
-        >
-          <Menu.Item onPress={logout} title="退出登录" />
-
-          <Menu.Item
-            onPress={() => {
-              setlocal();
-            }}
-            title={local ? TchangeToChinese : TchangeToth}
-          />
-          <Menu.Item onPress={() => {}} title="版本06.28.1" />
-        </Menu>
-      </Appbar.Header>
-    </>
-  );
-}

flooks/User.js

@@ -1,3 +1,4 @@
+import i18n from '../i18n';
 import request from '../Utils/RequestUtils';
 import {
   addAsyncStorage,
@@ -45,21 +46,21 @@ const app = (now) => ({
         return getUser();
       })
       .then(() => {
-        success('登录成功');
+        success(i18n.t('deng-lu-cheng-gong'));
       })
       .catch((e) => {
         warnning(e.error);
       });
   },
   logout() {
-    alert('', '确定要退出该账号吗?', () => {
+    alert('', `${i18n.t('que-ding-yao-tui-chu-gai-zhang-hao-ma')}?`, () => {
       const { loading, success } = now(Toast);
       loading();
       // 移除 token
       removeAsyncStorage('token').then(() => {
         // 清除用户信息
         now({ id: 0, userInfo: {} });
-        success('退出成功');
+        success(i18n.t('tui-chu-cheng-gong'));
       });
     });
   },
@@ -78,7 +79,7 @@ const app = (now) => ({
         return getUser();
       })
       .then(() => {
-        success('更新成功');
+        success(i18n.t('geng-xin-cheng-gong'));
         return Promise.resolve();
       })
       .catch((e) => {
@@ -113,7 +114,7 @@ const app = (now) => ({
         return getUser();
       })
       .then(() => {
-        success('注册成功');
+        success(i18n.t('zhu-ce-cheng-gong'));
       })
       .catch((e) => {
         warnning(e.error);

i18n.js

@@ -0,0 +1,34 @@
+import i18n from 'i18next';
+import * as Localization from 'expo-localization';
+import { initReactI18next } from 'react-i18next';
+import en from './locales/en.json';
+import zh from './locales/zh-CN.json';
+import th from './locales/th.json';
+
+const resources = {
+  zh: {
+    translation: zh,
+  },
+  en: {
+    translation: en,
+  },
+  th: {
+    translation: th,
+  },
+};
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: Localization.locale,
+    fallbackLng: 'zh-CN', // use en if detected lng is not available
+
+    keySeparator: false, // we do not use keys in form messages.welcome
+
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;

locales/en.json

@@ -0,0 +1,46 @@
+{
+  "welcom": "Welcome to use Dingdong takeaway platform",
+  "di-tu-xuan-dian-ce-shi": "Map selection test",
+  "jia-zai-zhong": "Loading...",
+  "qie-huan-yu-yan": "Switch language",
+  "tui-chu-deng-lu": "sign out",
+  "cha-kan": "View",
+  "cny": "¥",
+  "qing-kong": "Empty",
+  "shang-jia-biao-qian": "Merchant label",
+  "you-hui-huo-dong": "Promotions",
+  "yi-shi-wo-men-ke-yi-geng-hao-di-bang-nin-jie-jue-wen-ti": "So that we can better help you solve the problem",
+  "tips2": "In order for us to understand the situation more intuitively, please add detailed information!",
+  "tips1": "Merchants and riders have already taken orders, and in a hurry, the merchant can refuse to cancel your order. \nIt is recommended that you contact the merchant first.",
+  "shen-qing-qu-xiao-ding-dan": "Application to cancel the order",
+  "shen-qing-qu-xiao": "Apply for cancellation",
+  "qu-xiao-yuan-yin": "Reason for Cancellation",
+  "qu-xiao": "cancel",
+  "qing-wu-bi-tian-xie-zhen-shi-yuan-yin": "Please fill in the real reason",
+  "nin-ru-guo-que-ding-qu-xiao": "If you are sure to cancel",
+  "lian-xi-shang-jia": "Contact merchant",
+  "ding-dan-xiang-qing": "order details",
+  "ding-dan": "Orders",
+  "fa-xian-mei-shi": "Discover food",
+  "bao-cun": "save",
+  "bian-ji": "edit",
+  "bian-ji-di-zhi": "Edit address",
+  "biao-qian": "label",
+  "men-pai-hao": "House number",
+  "nv-shi": "Ms",
+  "qing-xuan-zhi-shou-huo-di-zhi": "Please select the delivery address",
+  "shou-huo-di-zhi": "Shipping address",
+  "shou-ji-hao": "phone number",
+  "shu-ru-shou-ji-hao": "input mobile phone number",
+  "xian": "limit",
+  "xian-sheng": "Mr",
+  "xing-ming": "Name",
+  "di-zhi-lie-biao": "Address list",
+  "mo-ren": "default",
+  "shan-chu": "delete",
+  "xin-zeng-di-zhi": "Add address",
+  "qing-xuan-ze": "please choose",
+  "qing-xuan-ze-di-zhi": "Please select an address",
+  "xuan-ze-shou-huo-di-zhi": "Choose delivery address",
+  "zan-wu-shu-ju": "No data"
+}

locales/th.json

@@ -0,0 +1,46 @@
+{
+  "welcom": "ยินดีต้อนรับสู่แพลตฟอร์มDing dong",
+  "di-tu-xuan-dian-ce-shi": "การทดสอบการเลือกแผนที่",
+  "jia-zai-zhong": "กำลังโหลด ...",
+  "qie-huan-yu-yan": "เปลี่ยนภาษา",
+  "tui-chu-deng-lu": "ออกจากระบบ",
+  "cha-kan": "ดู",
+  "cny": "¥",
+  "qing-kong": "ว่างเปล่า",
+  "shang-jia-biao-qian": "ป้ายกำกับของผู้ค้า",
+  "you-hui-huo-dong": "โปรโมชั่น",
+  "yi-shi-wo-men-ke-yi-geng-hao-di-bang-nin-jie-jue-wen-ti": "เพื่อให้เราสามารถช่วยคุณแก้ปัญหาได้ดีขึ้น",
+  "tips2": "เพื่อให้เราเข้าใจสถานการณ์ได้ง่ายขึ้นโปรดเพิ่มข้อมูลโดยละเอียด!",
+  "tips1": "ผู้ค้าและผู้ขับขี่ได้รับคำสั่งซื้อแล้วและรีบร้อนผู้ค้าสามารถปฏิเสธที่จะยกเลิกคำสั่งซื้อของคุณ \nขอแนะนำให้คุณติดต่อผู้ขายก่อน",
+  "shen-qing-qu-xiao-ding-dan": "ประยุกต์ใช้ในการยกเลิกคำสั่งซื้อ",
+  "shen-qing-qu-xiao": "สมัครเพื่อยกเลิก",
+  "qu-xiao-yuan-yin": "เหตุผลในการยกเลิก",
+  "qu-xiao": "ยกเลิก",
+  "qing-wu-bi-tian-xie-zhen-shi-yuan-yin": "กรุณากรอกเหตุผลที่แท้จริง",
+  "nin-ru-guo-que-ding-qu-xiao": "หากคุณแน่ใจว่าจะยกเลิก",
+  "lian-xi-shang-jia": "ติดต่อผู้ขาย",
+  "ding-dan-xiang-qing": "รายละเอียดการสั่งซื้อ",
+  "ding-dan": "สั่งซื้อ",
+  "fa-xian-mei-shi": "ค้นพบอาหาร",
+  "bao-cun": "บันทึก",
+  "bian-ji": "แก้ไข",
+  "bian-ji-di-zhi": "แก้ไขที่อยู่",
+  "biao-qian": "ฉลาก",
+  "men-pai-hao": "เลขที่บ้าน",
+  "nv-shi": "นางสาว",
+  "qing-xuan-zhi-shou-huo-di-zhi": "กรุณาเลือกที่อยู่จัดส่ง",
+  "shou-huo-di-zhi": "ที่อยู่สำหรับจัดส่ง",
+  "shou-ji-hao": "หมายเลขโทรศัพท์",
+  "shu-ru-shou-ji-hao": "ใส่หมายเลขโทรศัพท์มือถือ",
+  "xian": "จำกัด",
+  "xian-sheng": "นาย",
+  "xing-ming": "ชื่อ",
+  "di-zhi-lie-biao": "รายการที่อยู่",
+  "mo-ren": "ค่าเริ่มต้น",
+  "shan-chu": "ลบ",
+  "xin-zeng-di-zhi": "เพิ่มที่อยู่",
+  "qing-xuan-ze": "โปรดเลือก",
+  "qing-xuan-ze-di-zhi": "กรุณาเลือกที่อยู่",
+  "xuan-ze-shou-huo-di-zhi": "เลือกที่อยู่จัดส่ง",
+  "zan-wu-shu-ju": "ไม่มีข้อมูล"
+}

locales/zh-CN.json

@@ -0,0 +1,243 @@
+{
+  "welcom": "欢迎使⽤用叮咚外卖平台",
+  "di-tu-xuan-dian-ce-shi": "地图选点测试",
+  "tui-chu-deng-lu": "退出登录",
+  "jia-zai-zhong": "加载中...",
+  "qie-huan-yu-yan": "切换语言",
+  "you-hui-huo-dong": "优惠活动",
+  "shang-jia-biao-qian": "商家标签",
+  "cny": "¥",
+  "qing-kong": "清空",
+  "cha-kan": "查看",
+  "mi": "米",
+  "shan-chu": "删除",
+  "yue-shou": "月售",
+  "qi-song": "起送",
+  "pei-song": "配送",
+  "fen-zhong": "分钟",
+  "xi-huan-nin-lai-jin-gong-men-xi-huan-nin-lai-jin-gong-men": "“喜欢您来金拱门喜欢您来金拱门”",
+  "jian": "减",
+  "xin-dian-tui-jian": "新店推荐",
+  "geng-duo-xin-dian": "更多新店",
+  "dao-ji-shi": "倒计时",
+  "you-hui-zhuan-qu": "优惠专区",
+  "xuan-ze-shou-huo-di-zhi": "选择收货地址",
+  "guan-li": "管理",
+  "xiao-qu-xie-zi-lou-xue-xiao-deng": "小区/写字楼/学校 等",
+  "dang-qian-ding-wei": "当前定位",
+  "zhong-xin-ding-wei": "重新定位",
+  "ding-wei-shi-bai": "定位失败",
+  "sou-suo": "搜索",
+  "xiang-chi-shi-mo-sou-yi-sou": "想吃什么搜一搜",
+  "qu-xiao": "取消",
+  "fan-hui": "返回",
+  "re-men-sou-suo": "热门搜索",
+  "zan-wu-shu-ju": "暂无数据",
+  "shen-qing-qu-xiao-ding-dan": "申请取消订单",
+  "shang-jia-he-qi-shou-yi-jing-jie-dan-bing-zai-huo-su-gan-lai-shang-jia-ke-yijju-jue-nin-qu-xiao-ding-dan-jian-yi-nin-ke-yi-he-shang-jia-xian-lian-xi-xia": "商家和骑手已经接单，并在火速赶来，商家可以j拒绝您取消订单。建议您可以和商家先联系下。",
+  "tips1": "商家和骑手已经接单，并在火速赶来，商家可以j拒绝您取消订单。建议您可以和商家先联系下。",
+  "lian-xi-shang-jia": "联系商家",
+  "nin-ru-guo-que-ding-qu-xiao": "您如果确定取消",
+  "qing-wu-bi-tian-xie-zhen-shi-yuan-yin": "请务必填写真实原因",
+  "yi-shi-wo-men-ke-yi-geng-hao-di-bang-nin-jie-jue-wen-ti": "以使我们可以更好地帮您解决问题",
+  "qu-xiao-yuan-yin": "取消原因",
+  "tips2": "为了让我们更直观的了解情况，请补充详细信息！",
+  "shen-qing-qu-xiao": "申请取消",
+  "ding-dan-tou-su": "订单投诉",
+  "tou-su": "投诉",
+  "content1": "可补充具体投诉内容，您的投诉真实性对我们的处理至关重要",
+  "ti-jiao": "提交",
+  "tou-su-shang-jia": "投诉商家",
+  "tou-su-qi-shou": "投诉骑手",
+  "wei-zhao-dao-tou-su-xiang": "未找到投诉项",
+  "lian-xi-ke-fu": "联系客服",
+  "tip3": "评价完就有红包拿哦！",
+  "tipss4": "已对骑手匿名",
+  "content2": "说哪里好，哪里不够好。其他顾客想知道，商家也想知道",
+  "yi-dui-shang-jia-ni-ming": "已对商家匿名",
+  "wo-de-ding-dan": "我的订单",
+  "qu-xiao-ding-dan": "取消订单",
+  "ding-dan-xiang-qing": "订单详情",
+  "song-da": "送达",
+  "yu-ji": "预计",
+  "lian-xi-qi-shou": "联系骑手",
+  "cui-dan": "催单",
+  "da-shang-qi-shou": "打赏骑手",
+  "li-ji-ping-jia": "立即评价",
+  "bao-zhuang-fei": "包装费",
+  "can-he": "餐盒",
+  "pei-song-fei-ding-dong-zhuan-song": "配送费（叮咚专送）",
+  "man-jian": "满减",
+  "shou-dan": "首单",
+  "hong-bao": "红包",
+  "xiao-ji": "小计",
+  "ding-dan-xin-xi": "订单信息",
+  "xia-dan-shi-jian": "下单时间",
+  "song-da-shi-jian": "送达时间",
+  "yu-ji-song-da-shi-jian": "预计送达时间",
+  "shou-huo-di-zhi": "收货地址",
+  "pei-song-qi-shou": "配送骑手",
+  "ding-dan-hao": "订单号",
+  "fu-zhi": "复制",
+  "fu-zhi-cheng-gong": "复制成功",
+  "zhi-fu-fang-shi": "支付方式",
+  "ding-dan-bei-zhu": "订单备注",
+  "keewai-tian-xie-ding-dan-bei-zhu": "可额外填写订单备注",
+  "chang-yong-biao-qian": "常用标签",
+  "connect1": "正在帮您联系商家",
+  "yi-song-da": "已送达",
+  "ding-dan-shi-jian": "订单时间",
+  "ding-dan-shang-pin": "订单商品",
+  "deng": "等",
+  "jian2": "件",
+  "zai-lai-yi-dan": "再来一单",
+  "zhun-shi-shuai": "准时率",
+  "ri-jun-song-dan": "日均送单",
+  "da-shang-jiang-quanezhuan-gei-qi-shou": "打赏将全额转给骑手",
+  "da-shang": "打赏",
+  "qing-xuan-ze": "请选择",
+  "li-ji-shen-qing": "立即申请",
+  "deng-lu-mi-ma": "登录密码",
+  "she-zhi-mi-ma": "设置密码",
+  "ban-ben-hao": "版本号",
+  "wo-de-shou-cang": "我的收藏",
+  "shen-qing-ti-jiao-cheng-gong": "申请提交成功",
+  "shang-wu-he-zuo-shen-qing": "商务合作申请",
+  "shu-ru-lian-xi-ren": "输入联系人",
+  "xing-ming": "姓名",
+  "shu-ru-lian-xi-dian-hua": "输入联系电话",
+  "lian-xi-dian-hua": "联系电话",
+  "qi-wang-he-zuo-de-nei-rong": "期望合作的内容",
+  "tian-jia-shang-pin-jian-jie-bu-chao-guo-50-zi": "添加商品简介（不超过50字）",
+  "he-zuo-shen-qing": "合作申请",
+  "shang-jia-ru-zhu": "商家入驻",
+  "tips5": "美食、甜品饮料、水果、按摩商家已入驻",
+  "tips6": "商家入驻合作请联系",
+  "lian-xi-fang-shi": "联系方式",
+  "qi-shou-zhao-mu": "骑手招募",
+  "rider": "多劳多得、上不封顶、时间自由",
+  "rider2": "骑手招募合作请联系",
+  "shang-wu-he-zuo": "商务合作",
+  "shang-wu-he-zuo-qing-lian-xi": "商务合作请联系",
+  "fankui1": "感谢您的反馈，我们将根据您的反馈优化产品或服务，为您提供更好的使用体验",
+  "fankui2": "您对我们有什么意见或建议，或者遇到的问题反馈给我们，以便我们为您提供更好的服务（必填）",
+  "zui-duo-500-zi": "最多500字",
+  "qing-shu-ru-lian-xi-xin-xi-xuan-tian": "请输入联系信息（选填）",
+  "tips8": "联系人信息将为您加密传输，保护您的隐私",
+  "ti-jiao-fan-kui": "提交反馈",
+  "kai-dian-shen-qing": "开店申请",
+  "lian-xi-ren": "联系人",
+  "shu-ru-dian-pu-ming-cheng": "输入店铺名称",
+  "dian-pu-ming-cheng": "店铺名称",
+  "shu-ru-jing-ying-lei-xing": "输入经营类型",
+  "jing-ying-lei-xing": "经营类型",
+  "qing-shu-ru-dian-pu-di-zhi": "请输入店铺地址",
+  "dian-pu-di-zhi": "店铺地址",
+  "qi-shou-shen-qing": "骑手申请",
+  "address": "请输入期望的工作地址",
+  "addrss2": "期望的工作地址",
+  "yin-si-tiao-kuan": "隐私条款",
+  "yin-si-zheng-ce": "隐私政策",
+  "wei-deng-lu": "未登录",
+  "ge-ren-zi-liao": "个人资料",
+  "tou-xiang": "头像",
+  "ni-cheng": "昵称",
+  "qing-shu-ru-ni-cheng": "请输入昵称",
+  "ding-dong-wai-mai": "叮咚外卖",
+  "wo-de-di-zhi": "我的地址",
+  "she-zhi": "设置",
+  "yi-jian-fan-kui": "意见反馈",
+  "man": "满",
+  "yuan-ke-yong": "元可用",
+  "wu-jinemen-jian": "无金额门槛",
+  "xian": "限",
+  "zhi": "至",
+  "shi-yong": "使用",
+  "yi-guo-qi": "已过期",
+  "qu-shi-yong": "去使用",
+  "hong-bao-ka-quan": "红包卡券",
+  "you-hui-quan-yi-guo-qi": "优惠券已过期",
+  "dian-pu-bu-ke-yong": "店铺不可用",
+  "xuan-ze-you-hui-quan": "选择优惠券",
+  "wu-ke-yong-you-hui-quan": "无可用优惠券",
+  "ge-wei-shi-yong-hong-bao": "个未使用红包",
+  "tui-jian-shang-jia": "推荐商家",
+  "fa-xian-mei-shi": "发现美食",
+  "ju-li": "距离",
+  "xiao-liang": "销量",
+  "shai-xuan": "筛选",
+  "wai-mai": "外卖",
+  "ding-dan": "订单",
+  "wo-de": "我的",
+  "mo-ren": "默认",
+  "bian-ji": "编辑",
+  "di-zhi-lie-biao": "地址列表",
+  "xin-zeng-di-zhi": "新增地址",
+  "bian-ji-di-zhi": "编辑地址",
+  "shu-ru-shou-ji-hao": "输入手机号",
+  "xian-sheng": "先生",
+  "nv-shi": "女士",
+  "shou-ji-hao": "手机号",
+  "qing-xuan-zhi-shou-huo-di-zhi": "请选址收货地址",
+  "qing-shu-ru-men-pai-hao": "请输入门牌号",
+  "men-pai-hao": "门牌号",
+  "biao-qian": "标签",
+  "she-wei-mo-ren": "设为默认",
+  "bao-cun": "保存",
+  "qing-xuan-ze-di-zhi": "请选择地址",
+  "dang-qian-zan-wu-di-zhi": "当前暂无地址",
+  "que-ding-yao-tui-chu-gai-zhang-hao-ma": "确定要退出该账号吗",
+  "tui-chu-cheng-gong": "退出成功",
+  "geng-xin-cheng-gong": "更新成功",
+  "zhu-ce-cheng-gong": "注册成功",
+  "deng-lu-cheng-gong": "登录成功",
+  "ti-shi": "提示",
+  "que-ding": "确定",
+  "tips9": "感谢您对我们的信任，我们将竭尽所能\r\n      的为您解决问题。您的每一个建议和反馈都对我们至关重要",
+  "ke-fu-dian-hua": "客服电话",
+  "wo-yao-tou-su": "我要投诉",
+  "dai-shang-jia-jie-dan": "待商家接单",
+  "shang-jia-yi-jie-dan": "商家已接单",
+  "shang-jia-yi-tui-dan": "商家已退单",
+  "yi-wan-cheng": "已完成',",
+  "ding-dan-wei-zhi-fu": "订单未支付",
+  "yong-hu-yi-zhi-fu": "用户已支付",
+  "dai-ping-jia": "待评价",
+  "ding-dan-yi-qu-xiao": "订单已取消",
+  "shen-qing-tui-kuan-zhong": "申请退款中",
+  "tui-kuan-zhong": "退款中",
+  "yi-tui-kuan": "已退款",
+  "dai-qi-shou-jie-dan": "待骑手接单",
+  "qi-shou-yi-jie-dan": "骑手已接单",
+  "qi-shou-yi-qu-can": "骑手已取餐",
+  "ding-dan-zheng-zai-pei-song-zhong": "订单正在配送中",
+  "ding-dan-yi-song-da": "订单已送达",
+  "zhi-fu-bao": "支付宝",
+  "huo-dao-fu-kuan": "货到付款",
+  "xin-yong-ka": "信用卡",
+  "dang-qian-ding-dan-wu-fa-pei-song": "当前订单无法配送",
+  "pei-song-shi-jian-tai-chang": "配送时间太长",
+  "di-zhi-tian-xie-cuo-wu": "地址填写错误",
+  "shang-jia-wu-fa-song-da-lian-xi-wo-qu-xiao": "商家无法送达，联系我取消",
+  "shang-jia-que-huo-da-yang-lian-xi-wo-qu-xiao": "商家缺货/打烊，联系我取消",
+  "wang-ji-shi-yong-hong-bao": "忘记使用红包",
+  "wang-dian-zhu-shi": "忘点主食",
+  "qi-shou-lian-xi-wo-qu-xiao": "骑手联系我取消",
+  "dian-duo-le-dian-cuo-le-lou-dian-le": "点多了/点错了/漏点了",
+  "lin-shi-you-shi-bu-xiang-yao-le": "临时有事不想要了",
+  "qi-ta-yuan-yin": "其他原因",
+  "zong-he-pai-xu": "综合排序",
+  "hao-ping-you-xian": "好评优先",
+  "qi-song-fei-zui-di": "起送费最低",
+  "pei-song-zui-kuai": "配送最快",
+  "pei-song-fei-zui-di": "配送费最低",
+  "ren-jun-zui-di": "人均最低",
+  "ren-jun-zui-gao": "人均最高",
+  "xin-shang-jia": "新商家",
+  "ming-xing-shang-jia": "明星商家",
+  "shou-dan-li-jian": "首单立减",
+  "man-jian-you-hui": "满减优惠",
+  "zhe-kou-shang-jia": "折扣商家",
+  "xia-dan-fan-hong-bao": "下单返红包",
+  "ke-yong-hong-bao": "可用红包"
+}

navigation/BottomTabNavigator.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useTranslation } from 'react-i18next';
 import HomeScreen from '../screens/Main/HomeScreen';
 import OrderScreen from '../screens/Order/OrderScreen';
 import UserScreen from '../screens/User/UserScreen';
@@ -9,6 +10,7 @@ import Text from '../components/Text';
 const BottomTab = createBottomTabNavigator();
 
 export default function BottomTabNavigator() {
+  const { t } = useTranslation();
   return (
     <BottomTab.Navigator initialRouteName="Home">
       <BottomTab.Screen
@@ -17,7 +19,7 @@ export default function BottomTabNavigator() {
         options={{
           title: ({ focused }) => (
             <Text size="c2" bold type={focused ? 'primary' : 'info'}>
-              外卖
+              {t('wai-mai')}
             </Text>
           ),
           tabBarIcon: ({ focused }) => (
@@ -36,7 +38,7 @@ export default function BottomTabNavigator() {
         options={{
           title: ({ focused }) => (
             <Text size="c2" bold type={focused ? 'primary' : 'info'}>
-              订单
+              {t('ding-dan')}
             </Text>
           ),
           tabBarIcon: ({ focused }) => (
@@ -50,7 +52,7 @@ export default function BottomTabNavigator() {
         options={{
           title: ({ focused }) => (
             <Text size="c2" bold type={focused ? 'primary' : 'info'}>
-              我的
+              {t('wo-de')}
             </Text>
           ),
           tabBarIcon: ({ focused }) => (

package-lock.json

@@ -7448,6 +7448,14 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "html-parse-stringify2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
+      "integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
+      "requires": {
+        "void-elements": "^2.0.1"
+      }
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -7487,6 +7495,14 @@
       "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-3.7.1.tgz",
       "integrity": "sha512-xrRzCeda5ZC0u0yRN+dMdidtda0N+f7t7Pek0ajWb+iyKqSGdrMmuBtbNpWJWY5N4Th0cxbp/BR57zSPdrM3Rw=="
     },
+    "i18next": {
+      "version": "19.6.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.6.2.tgz",
+      "integrity": "sha512-Zyd/Z32FY+sD+Eg6sLj5DeDSlrIN3WZ4onuOBRGcjDx/rvodsyUZ9TJ2Y+3aD9Vu8MPbiMU2WesIER/rs1ioyw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -13783,6 +13799,15 @@
         "scheduler": "^0.17.0"
       }
     },
+    "react-i18next": {
+      "version": "11.7.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.7.0.tgz",
+      "integrity": "sha512-8tvVkpuxQlubcszZON+jmoCgiA9gCZ74OAYli9KChPhETtq8pJsANBTe9KRLRLmX3ubumgvidURWr0VvKz1tww==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "html-parse-stringify2": "2.0.1"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -16297,6 +16322,11 @@
       "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
       "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
     },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -48,12 +48,14 @@
     "expo-web-browser": "~8.3.1",
     "flooks": "^3.0.0",
     "i18n-js": "^3.7.0",
+    "i18next": "^19.6.2",
     "mockjs": "^1.1.0",
     "moment": "^2.26.0",
     "native-base": "^2.13.12",
     "qs": "^6.9.4",
     "react": "16.11.0",
     "react-dom": "16.11.0",
+    "react-i18next": "^11.7.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz",
     "react-native-animatable": "^1.3.3",
     "react-native-animation-hooks": "^1.0.1",

screens/Address/AddressCom.jsx

@@ -12,6 +12,7 @@ import {
 } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { Modal, Portal, TouchableRipple, Badge } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
 
 import { useRequest, useCreation, useUnmount } from '@umijs/hooks';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
@@ -64,6 +65,7 @@ const AddressItem = ({ info, editEvent, isChoose, leftEvent }) => {
 };
 
 export default function AddressCom() {
+  const { t } = useTranslation();
   const {
     addressList,
     getAddressList,
@@ -135,7 +137,7 @@ export default function AddressCom() {
             </Div>
           ) : (
             <>
-              <Text color="gray300">请选择地址</Text>
+              <Text color="gray300">{t('qing-xuan-ze-di-zhi')}</Text>
               <Div flex={1} />
             </>
           )}
@@ -163,7 +165,7 @@ export default function AddressCom() {
         >
           <Div bg="white" px={15} mt={56}>
             <Div py={15}>
-              <Text textAlign="center">选择收货地址</Text>
+              <Text textAlign="center">{t('xuan-ze-shou-huo-di-zhi')}</Text>
             </Div>
 
             <Div h={1} bg="gray200" />
@@ -190,7 +192,7 @@ export default function AddressCom() {
             {addressList.length === 0 && (
               <Div p={30}>
                 <Text color="gray300" textAlign="center">
-                  暂无数据111
+                  {t('zan-wu-shu-ju')}
                 </Text>
               </Div>
             )}

screens/Address/AddressScreen.jsx

@@ -4,6 +4,7 @@ import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
 
 import { Flex, SwipeAction } from '@ant-design/react-native';
 import { ScrollView } from 'react-native-gesture-handler';
+import { useTranslation } from 'react-i18next';
 
 import { useRequest, useCreation } from '@umijs/hooks';
 import useModel from 'flooks';
@@ -12,9 +13,10 @@ import AddressModel from './model'; // detail模块通用方法
 import Header from '../../components/Header';
 
 const AddressItem = ({ info, goNext, del }) => {
+  const { t } = useTranslation();
   const right = [
     {
-      text: '删除',
+      text: t('shan-chu'),
       onPress: () => {
         console.log('删除');
         del();
@@ -46,7 +48,7 @@ const AddressItem = ({ info, goNext, del }) => {
         <Div row justifyContent="flex-end">
           {info.isDefault && (
             <Button fontSize="xs" bg="brand500">
-              默认
+              {t('mo-ren')}
             </Button>
           )}
           <Button
@@ -58,7 +60,7 @@ const AddressItem = ({ info, goNext, del }) => {
             borderWidth={1}
             onPress={goNext}
           >
-            编辑
+            {t('bian-ji')}
           </Button>
         </Div>
       </Div>
@@ -67,6 +69,7 @@ const AddressItem = ({ info, goNext, del }) => {
 };
 
 export default function AddressScreen({ navigation }) {
+  const { t } = useTranslation();
   const { addressList, getAddressList, delAddress } = useModel(AddressModel, [
     'addressList',
   ]);
@@ -74,7 +77,7 @@ export default function AddressScreen({ navigation }) {
 
   return (
     <>
-      <Header title="地址列表" />
+      <Header title={t('di-zhi-lie-biao')} />
       <ScrollView>
         {addressList.map((item) => {
           return (
@@ -103,7 +106,7 @@ export default function AddressScreen({ navigation }) {
           navigation.navigate('EditAddress');
         }}
       >
-        新增地址
+        {t('xin-zeng-di-zhi')}
       </Button>
     </>
   );

screens/Address/EditAddressScreen.jsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Div, Button, Text, Tag, Toggle, Icon } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { InputItem } from '@ant-design/react-native';
+import { useTranslation } from 'react-i18next';
 
 import { useRoute } from '@react-navigation/native';
 import { useRequest, useToggle, useBoolean, useCreation } from '@umijs/hooks';
@@ -18,6 +19,7 @@ const AddressTag = new Map([
 ]);
 
 export default function EditAddressScreen({ navigation }) {
+  const { t } = useTranslation();
   const route = useRoute();
   const { params } = route;
 
@@ -109,18 +111,18 @@ export default function EditAddressScreen({ navigation }) {
 
   return (
     <>
-      <Header title="编辑地址" noBack={false} />
+      <Header title={t('bian-ji-di-zhi')} noBack={false} />
       <ScrollView>
         <Div bg="white">
           <InputItem
             clear
             value={name}
             onChange={setName}
-            placeholder="输入手机号"
+            placeholder={t('shu-ru-shou-ji-hao')}
             style={{ fontSize: 14 }}
           >
             <Text fontSize="xs" textAlign="left">
-              姓名
+              {t('xing-ming')}
             </Text>
           </InputItem>
           <Div row py={15}>
@@ -133,7 +135,7 @@ export default function EditAddressScreen({ navigation }) {
               bg={sexEvent.state === '先生' ? 'brand500' : 'gray200'}
               color={sexEvent.state === '先生' ? 'white' : 'gray600'}
             >
-              先生
+              {t('xian-sheng')}
             </Button>
             <Button
               onPress={() => sexEvent.setRight()}
@@ -144,7 +146,7 @@ export default function EditAddressScreen({ navigation }) {
               bg={sexEvent.state === '女士' ? 'brand500' : 'gray200'}
               color={sexEvent.state === '女士' ? 'white' : 'gray600'}
             >
-              女士
+              {t('nv-shi')}
             </Button>
           </Div>
           <InputItem
@@ -156,7 +158,7 @@ export default function EditAddressScreen({ navigation }) {
             style={{ fontSize: 14 }}
           >
             <Text fontSize="xs" textAlign="left">
-              手机号
+              {t('shou-ji-hao')}
             </Text>
           </InputItem>
           <Button
@@ -180,10 +182,10 @@ export default function EditAddressScreen({ navigation }) {
               mr={0}
             >
               <Text fontSize="xs" w={71}>
-                收货地址
+                {t('shou-huo-di-zhi')}
               </Text>
               <Text color={addressName ? 'gray600' : 'gray300'} flex={1}>
-                {addressName || '请选址收货地址'}
+                {addressName || t('qing-xuan-zhi-shou-huo-di-zhi')}
               </Text>
               <Icon mr={15} fontSize="sm" name="right" color="#000" />
             </Div>
@@ -193,16 +195,16 @@ export default function EditAddressScreen({ navigation }) {
             clear
             value={number}
             onChange={setnumber}
-            placeholder="请输入门牌号"
+            placeholder={t('qing-shu-ru-men-pai-hao')}
             style={{ fontSize: 14 }}
           >
             <Text fontSize="xs" textAlign="left">
-              门牌号
+              {t('men-pai-hao')}
             </Text>
           </InputItem>
           <Div row p={15} alignItems="center">
             <Text fontSize="xs" w={71} textAlign="left">
-              标签
+              {t('biao-qian')}
             </Text>
 
             {[...AddressTag.keys()].map((key) => {
@@ -231,7 +233,7 @@ export default function EditAddressScreen({ navigation }) {
             h={30}
             w={60}
           />
-          <Text ml={15}>设为默认</Text>
+          <Text ml={15}>{t('she-wei-mo-ren')}</Text>
         </Div>
 
         <Button
@@ -256,7 +258,7 @@ export default function EditAddressScreen({ navigation }) {
             });
           }}
         >
-          保存
+          {t('bao-cun')}
         </Button>
       </ScrollView>
     </>

screens/Address/HomeAddressCom.jsx

@@ -5,7 +5,7 @@ import { Div, Button, Select, Image, Text, Avatar } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { Modal, Portal, TouchableRipple, Badge } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/FontAwesome';
-
+import { useTranslation } from 'react-i18next';
 import { useRequest, useCreation, useUnmount } from '@umijs/hooks';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import useModel from 'flooks';
@@ -45,6 +45,7 @@ const AddressItem = ({ info, onPress }) => {
 };
 
 export default function HomeAddressCom() {
+  const { t } = useTranslation();
   const {
     addressList,
     getAddressList,
@@ -67,7 +68,7 @@ export default function HomeAddressCom() {
       <Div bg="white" px={15} pb={15}>
         <Div h={1} bg="gray200" />
         <Text py={12} fontSize="sm" color="gray500">
-          收货地址
+          {t('shou-huo-di-zhi')}
         </Text>
         <Div h={1} bg="gray200" />
         {addressList.map((item) => {
@@ -94,7 +95,7 @@ export default function HomeAddressCom() {
           <>
             <Div p={20}>
               <Text color="gray300" textAlign="center">
-                当前暂无地址
+                {t('dang-qian-zan-wu-di-zhi')}
               </Text>
             </Div>
             <Div h={1} bg="gray200" />
@@ -112,7 +113,7 @@ export default function HomeAddressCom() {
           }}
         >
           <Text flex={1} color="brand500">
-            新增地址
+            {t('xin-zeng-di-zhi')}
           </Text>
         </Button>
       </Div>

screens/Main/AddressScreen.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/style-prop-object */
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { StatusBar } from 'expo-status-bar';
@@ -5,6 +6,7 @@ import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
 import { Appbar } from 'react-native-paper';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useCreation } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
 
 import useModel from 'flooks';
 import HomeModel from './Home/model';
@@ -16,6 +18,7 @@ export default function AddressScreen({ navigation }) {
     MapModel,
     ['locationInfo', 'getNowLocation']
   );
+  const { t } = useTranslation();
 
   const addressName = useCreation(() => {
     if (locationInfo) {
@@ -44,11 +47,11 @@ export default function AddressScreen({ navigation }) {
         >
           <Appbar.BackAction onPress={navigation.goBack} />
           <Appbar.Content
-            title="选择收货地址"
+            title={t('xuan-ze-shou-huo-di-zhi')}
             titleStyle={{ textAlign: 'center', fontSize: 16 }}
           />
           <Button alignSelf="center" bg="hide" color="brand500" px={20}>
-            管理
+            {t('guan-li')}
           </Button>
         </Appbar.Header>
 
@@ -63,7 +66,7 @@ export default function AddressScreen({ navigation }) {
           <Div row alignItems="center">
             <Icon name="search1" color="gray500" />
             <Text color="gray500" fontSize="xs">
-              小区/写字楼/学校 等
+              {t('xiao-qu-xie-zi-lou-xue-xiao-deng')}
             </Text>
           </Div>
         </Button>
@@ -76,7 +79,7 @@ export default function AddressScreen({ navigation }) {
       >
         <Div px={15} py={10}>
           <Text color="gray500" fontSize="sm">
-            当前定位
+            {t('dang-qian-ding-wei')}
           </Text>
           <Div row>
             <Button
@@ -102,13 +105,13 @@ export default function AddressScreen({ navigation }) {
                   flex={1}
                 >
                   {getNowLocation.loading
-                    ? '加载中...'
-                    : addressName || '定位失败'}
+                    ? t('jia-zai-zhong')
+                    : addressName || t('ding-wei-shi-bai')}
                 </Text>
               </Div>
             </Button>
             <Button onPress={getNowLocation} bg="hiden" color="brand500">
-              重新定位
+              {t('zhong-xin-ding-wei')}
             </Button>
           </Div>
         </Div>

screens/Main/Home/Filter.jsx

@@ -2,6 +2,7 @@ import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { Animated, Dimensions } from 'react-native';
 import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
+import { useTranslation } from 'react-i18next';
 import Slider from '@react-native-community/slider';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSet } from '@umijs/hooks';
@@ -19,6 +20,7 @@ export default function Filter({
   clear,
   submit,
 }) {
+  const { t } = useTranslation();
   const filterHeight = useAnimation({
     type: 'timing',
     initialValue: 0,
@@ -54,7 +56,7 @@ export default function Filter({
         <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
           <Div p={10}>
             <Text fontSize="xs" color="gray300">
-              优惠活动
+              {t('you-hui-huo-dong')}
             </Text>
 
             <Div row flexWrap="wrap" py={5}>
@@ -85,7 +87,7 @@ export default function Filter({
             </Div>
             <Div py={5}>
               <Text fontSize="xs" color="gray300">
-                商家标签
+                {t('shang-jia-biao-qian')}
               </Text>
 
               <Div row flexWrap="wrap" py={5}>
@@ -137,11 +139,11 @@ export default function Filter({
             </Div>
             <Div py={5}>
               <Text fontSize="xs" color="gray300">
-                人均消费
+                {t('di-tu-xuan-dian-ce-shi')}
               </Text>
               <Div row py={10}>
                 <Text fontSize="sm" flex={1}>
-                  ¥0
+                  {t('cny')}0
                 </Text>
                 <Text fontSize="sm">¥{sliderVal}</Text>
               </Div>
@@ -162,7 +164,7 @@ export default function Filter({
         </ScrollView>
         <Div row borderTopWidth={1} borderColor="gray200">
           <Button flex={1} bg="white" color="gray300" onPress={clear}>
-            清空
+            {t('qing-kong')}
           </Button>
           <Button
             flex={1}
@@ -177,7 +179,7 @@ export default function Filter({
               );
             }}
           >
-            查看
+            {t('cha-kan')}
           </Button>
         </Div>
       </Animated.View>

screens/Main/Home/HomeHeader.js → screens/Main/Home/HomeHeader.jsx

@@ -6,17 +6,19 @@ import { Icon, Text, Button, Div } from 'react-native-magnus';
 
 import useModel from 'flooks';
 import { useNavigation } from '@react-navigation/native';
-import words from '../../../flooks/Words';
+
+import { useTranslation } from 'react-i18next';
+
 import user from '../../../flooks/User';
 import MapModel from '../../Map/model';
 
 export default function Header() {
+  const { t, i18n } = useTranslation();
   const { chooseInfo, getChooseInfo } = useModel(MapModel, [
     'chooseInfo',
     'getChooseInfo',
   ]);
   const { state, setTrue, setFalse } = useBoolean(false);
-  const { setlocal, TchangeToth, TchangeToChinese, local } = useModel(words);
 
   const { logout } = useModel(user, []);
 
@@ -69,7 +71,7 @@ export default function Header() {
               fontWeight="bold"
               flex={1}
             >
-              {getChooseInfo.loading ? '加载中...' : addressName}
+              {getChooseInfo.loading ? t('jia-zai-zhong') : addressName}
             </Text>
           </Div>
         </Button>
@@ -84,16 +86,19 @@ export default function Header() {
               setFalse();
               navigation.navigate('MapScreen');
             }}
-            title="地图选点测试"
+            title={t('di-tu-xuan-dian-ce-shi')}
           />
-          <Menu.Item onPress={logout} title="退出登录" />
+          <Menu.Item onPress={logout} title={t('tui-chu-deng-lu')} />
           <Menu.Item
             onPress={() => {
-              setlocal();
+              const list = ['zh', 'th', 'en'];
+              i18n.changeLanguage(
+                list[(list.indexOf(i18n.language) + 1) % list.length]
+              );
             }}
-            title={local ? TchangeToChinese : TchangeToth}
+            title={t('qie-huan-yu-yan')}
           />
-          <Menu.Item onPress={() => {}} title="版本07.14.2(首页搜索)" />
+          <Menu.Item onPress={() => {}} title="版本07.17.1(国际化文件导入)" />
         </Menu>
       </Appbar.Header>
     </>

screens/Main/Home/ListTop.jsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Animated, Dimensions } from 'react-native';
 import { Div, Button, Text, Icon } from 'react-native-magnus';
 import { useBoolean, useCreation } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
 import { useAnimation } from 'react-native-animation-hooks';
 import useModel from 'flooks';
 import HomeModel from './model';
@@ -14,6 +15,7 @@ export default function List({
   topHeight,
   setscrollEnabled,
 }) {
+  const { t } = useTranslation();
   const SortMenu = useBoolean(false);
   const filterMenu = useBoolean(false);
   const {
@@ -84,7 +86,7 @@ export default function List({
             px={10}
             color={soltType === 'first' ? 'brand500' : 'gray600'}
           >
-            推荐商家
+            {t('tui-jian-shang-jia')}
           </Button>
           {/* <View style={{ width: 33 }} /> */}
           <Button
@@ -95,7 +97,7 @@ export default function List({
             mx={10}
             onPress={() => {}}
           >
-            发现美食
+            {t('fa-xian-mei-shi')}
           </Button>
         </Div>
         <Div row bg="white" alignItems="center">
@@ -137,7 +139,7 @@ export default function List({
               filterMenu.setFalse();
             }}
           >
-            距离
+            {t('ju-li')}
           </Button>
           <Button
             fontSize="xs"
@@ -150,7 +152,7 @@ export default function List({
               filterMenu.setFalse();
             }}
           >
-            销量
+            {t('xiao-liang')}
           </Button>
           <Div flex={1} />
           <Button
@@ -162,7 +164,7 @@ export default function List({
             px={10}
           >
             <Text fontSize="xs" color="gray600">
-              筛选
+              {t('shai-xuan')}
             </Text>
             <Icon
               name="down"

screens/Main/Home/MerchantCom.js

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import { Div, Text, Image, Tag } from 'react-native-magnus';
 import { Flex, SwipeAction } from '@ant-design/react-native';
 import { TouchableRipple } from 'react-native-paper';
-
+import { useTranslation } from 'react-i18next';
 import useModel from 'flooks';
 import { useCreation } from '@umijs/hooks';
 import { useNavigation } from '@react-navigation/native';
@@ -20,7 +20,7 @@ export default function MerchantCom(props) {
   const navigation = useNavigation();
 
   const { delLike } = useModel(DetailModel, []);
-
+  const { t } = useTranslation();
   const {
     showName,
     logo,
@@ -54,7 +54,7 @@ export default function MerchantCom(props) {
 
   const long = useCreation(() => {
     if (distance < 1000) {
-      return `${distance}米`;
+      return `${distance}${t('mi')}`;
     } else if (distance) {
       return `${(distance / 1000).toFixed(1)}km`;
     } else {
@@ -64,7 +64,7 @@ export default function MerchantCom(props) {
 
   const right = [
     {
-      text: '删除',
+      text: t('shan-chu'),
       onPress: () => {
         console.log('删除');
         delLike(CollectionId).then(() => freash());
@@ -145,24 +145,23 @@ export default function MerchantCom(props) {
                 </Flex>
                 <Flex style={styles.text}>
                   <Text size="c1" color="gray300" textAlign="left">
-                    月售
+                    {t('yue-shou')}
                     {monthSales}
                   </Text>
                 </Flex>
               </Flex>
               <Flex>
                 <Text fontSize="sm" color="gray300" textAlign="left">
-                  起送$
-                  {startingAmount || 0}
+                  {t('qi-song')}${startingAmount || 0}
                 </Text>
                 <Flex.Item style={styles.text}>
                   <Text fontSize="sm" color="gray300" textAlign="left">
-                    配送$ 10
+                    {t('pei-song')}$ 10
                   </Text>
                 </Flex.Item>
                 <Text fontSize="sm" color="gray300" textAlign="left">
                   {preparationTime || 60}
-                  分钟
+                  {t('fen-zhong')}
                 </Text>
                 {!!long && (
                   <View style={styles.text}>
@@ -174,7 +173,9 @@ export default function MerchantCom(props) {
               </Flex>
               <Flex style={styles.label2}>
                 <Chip size="mini" color="#FFE3B9" fontColor="#FF0000">
-                  “喜欢您来金拱门喜欢您来金拱门”
+                  {t(
+                    'xi-huan-nin-lai-jin-gong-men-xi-huan-nin-lai-jin-gong-men'
+                  )}
                 </Chip>
                 <Chip size="mini" color="#FFE3B9" fontColor="#FF0000">
                   “喜欢您来金拱门喜欢您来金拱门”
@@ -182,7 +183,7 @@ export default function MerchantCom(props) {
               </Flex>
               <Flex style={styles.label2} wrap="wrap">
                 <Chip size="mini" outline color="#FF0000">
-                  12减5
+                  12{t('jian')}5
                 </Chip>
               </Flex>
             </Div>

screens/Main/Home/RecommendStore.jsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Flex, WingBlank } from '@ant-design/react-native';
 import { Card } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
 import { Div, Button, Text, Image } from 'react-native-magnus';
 import { useNavigation } from '@react-navigation/native';
 import useModel from 'flooks';
@@ -25,6 +26,7 @@ function CardCom({ info, onPress }) {
 }
 
 export default function RecommendStore() {
+  const { t } = useTranslation();
   const { newMerchants } = useModel(HomeModel, ['newMerchants']);
   const navigation = useNavigation();
 
@@ -32,7 +34,7 @@ export default function RecommendStore() {
     <Div p={15}>
       <Div row>
         <Text flex={1} fontSize="xl" textweight="bold">
-          新店推荐
+          {t('xin-dian-tui-jian')}
         </Text>
         <Button
           bg="white"
@@ -44,7 +46,7 @@ export default function RecommendStore() {
             navigation.navigate('MerchantsList');
           }}
         >
-          更多新店&gt;
+          {t('geng-duo-xin-dian')}&gt;
         </Button>
       </Div>
 

screens/Main/Home/SpecialArea.jsx

@@ -1,5 +1,6 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { StyleSheet } from 'react-native';
 import { Flex, WingBlank } from '@ant-design/react-native';
 import { Div, Button, Text } from 'react-native-magnus';
@@ -13,6 +14,7 @@ import Banner from './Banner';
 // 优惠专区
 export default function SpecialArea() {
   const navigation = useNavigation();
+  const { t } = useTranslation();
 
   const { promote1, promote2, bannerList } = useModel(HomeModel);
   const promote1Card = (list) => {
@@ -37,7 +39,7 @@ export default function SpecialArea() {
               <Text>{merchant.name}</Text>
               <Div row>
                 <Text fontSize="sm" mr={5}>
-                  倒计时
+                  {t('dao-ji-shi')}
                 </Text>
                 <CountDown
                   endTime={item.endDateTime}
@@ -85,7 +87,7 @@ export default function SpecialArea() {
     <>
       <Div bg="white" px={15}>
         <Text fontSize="xl" fontWeight="bold" py={5}>
-          优惠专区
+          {t('you-hui-zhuan-qu')}
         </Text>
         <Div row mb={5}>
           {promote1Card(promote1)}
@@ -95,7 +97,7 @@ export default function SpecialArea() {
         </Div>
 
         <Text fontSize="xl" fontWeight="bold" py={5}>
-          优惠专区
+          {t('you-hui-zhuan-qu')}
         </Text>
 
         <Banner type="AREA" round noDots />

screens/Main/HomeScreen.jsx

@@ -9,6 +9,7 @@ import Constants from 'expo-constants';
 import useModel from 'flooks';
 import { useMount } from '@umijs/hooks';
 import { useAnimation } from 'react-native-animation-hooks';
+import { useTranslation } from 'react-i18next';
 
 import Header from './Home/HomeHeader';
 import Banner from './Home/Banner';
@@ -21,6 +22,7 @@ import HomeModel from './Home/model';
 import Icon from '../../components/SvgIcon';
 
 export default function HomeScreen({ navigation }) {
+  const { t } = useTranslation();
   const { initHome, list, loadingTop } = useModel(HomeModel, [
     'list',
     'loadingTop',
@@ -68,7 +70,7 @@ export default function HomeScreen({ navigation }) {
             my={10}
             onPress={() => navigation.navigate('Search')}
           >
-            搜索
+            {t('sou-suo')}
           </Button>
         </Div>
         {!loadingTop && (

screens/Main/MerchantsListScreen.jsx

@@ -2,6 +2,7 @@ import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
+import { useTranslation } from 'react-i18next';
 
 import useModel from 'flooks';
 import HomeModel from './Home/model';
@@ -10,11 +11,12 @@ import MerchantCom from './Home/MerchantCom';
 import Header from '../../components/Header';
 
 export default function MerchantsListScreen() {
+  const { t } = useTranslation();
   const { allnewMerchants } = useModel(HomeModel, ['allnewMerchants']);
 
   return (
     <>
-      <Header title="新店推荐" />
+      <Header title={t('xin-dian-tui-jian')} />
       <ScrollView
         contentContainerStyle={{
           flexGrow: 1,

screens/Main/SearchScreen.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/style-prop-object */
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { StatusBar } from 'expo-status-bar';
@@ -14,6 +15,8 @@ import {
 } from 'react-native-magnus';
 import { FlatList } from 'react-native-gesture-handler';
 
+import { useTranslation } from 'react-i18next';
+
 import useModel from 'flooks';
 import HomeModel from './Home/model';
 import MerchantCom from './Home/MerchantCom';
@@ -21,7 +24,9 @@ import MerchantCom from './Home/MerchantCom';
 import Header from '../../components/Header';
 
 import { filterMap } from '../../Utils/MerchantUtils';
+
 export default function SearchScreen({ navigation }) {
+  const { t } = useTranslation();
   const { searchHome } = useModel(HomeModel, ['searchHome']);
 
   const [isSearch, setIsSearch] = React.useState(false);
@@ -36,7 +41,7 @@ export default function SearchScreen({ navigation }) {
 
   function search() {
     if (searchHome.loading) {
-      return false;
+      return;
     }
     setIsSearch(true);
     setEmpty(false);
@@ -78,7 +83,7 @@ export default function SearchScreen({ navigation }) {
       <Div row bg="white" py={10} alignItems="center">
         <Input
           bg="gray200"
-          placeholder="想吃什么搜一搜"
+          placeholder={t('xiang-chi-shi-mo-sou-yi-sou')}
           p={10}
           fontSize="xs"
           flex={1}
@@ -110,7 +115,7 @@ export default function SearchScreen({ navigation }) {
                 setIsSearch(false);
               }}
             >
-              取消
+              {t('qu-xiao')}
             </Button>
           ) : (
             <Button
@@ -120,7 +125,7 @@ export default function SearchScreen({ navigation }) {
               fontSize="xs"
               onPress={() => navigation.goBack()}
             >
-              返回
+              {t('fan-hui')}
             </Button>
           )}
         </Div>
@@ -128,7 +133,7 @@ export default function SearchScreen({ navigation }) {
       {!isSearch && (
         <Div bg="white" flex={1}>
           <Div px={10} mt={10}>
-            <Text>热门搜索</Text>
+            <Text>{t('re-men-sou-suo')}</Text>
 
             <Div row flexWrap="wrap">
               {[...filterMap.keys()].map((item, index) => {
@@ -155,7 +160,7 @@ export default function SearchScreen({ navigation }) {
           data={list}
           renderItem={({ item }) => <MerchantCom info={item} />}
           onEndReached={search}
-          ListEmptyComponent={() => empty && <Text>暂无数据</Text>}
+          ListEmptyComponent={() => empty && <Text>{t('zan-wu-shu-ju')}</Text>}
         />
       )}
     </>

screens/Map/SearchMapScreen copy.jsx

@@ -1,125 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import * as WebBrowser from 'expo-web-browser';
-import * as React from 'react';
-import { StatusBar } from 'expo-status-bar';
-import {
-  Div,
-  Button,
-  Image,
-  Text,
-  Avatar,
-  Icon,
-  Input,
-} from 'react-native-magnus';
-import { Appbar } from 'react-native-paper';
-import { ScrollView } from 'react-native-gesture-handler';
-
-import useModel from 'flooks';
-import { getSearch } from '../../Utils/MapUtils';
-
-// 搜索
-
-export default function SearchMapScreen({ navigation }) {
-
-  const [points, setPoints] = React.useState([]);
-
-  return (
-    <>
-      <Div bg="white" pb={10} borderBottomWidth={1} borderColor="gray200">
-        <StatusBar backgroundColor="#fff" style="dark" translucent />
-
-        <Appbar.Header
-          theme={{ colors: { primary: '#fff' } }}
-          style={{
-            elevation: 0,
-            shadowOffset: {
-              width: 0,
-              height: 0,
-            },
-            shadowOpacity: 0,
-            zIndex: 2,
-          }}
-        >
-          <Appbar.BackAction onPress={navigation.goBack} />
-          <Appbar.Content
-            title="选择收货地址"
-            titleStyle={{ textAlign: 'center', fontSize: 16 }}
-          />
-          <Div w={56} h={56} />
-        </Appbar.Header>
-
-        <Div
-          row
-          rounded="circle"
-          block
-          bg="gray200"
-          mx={15}
-          mt={10}
-          alignItems="center"
-          px={10}
-        >
-          <Text>南京市</Text>
-          <Input
-            placeholder="小区/写字楼/学校 等"
-            p={10}
-            focusBorderColor="gray200"
-            bg="gray200"
-            fontSize="xs"
-            prefix={<Icon name="search" color="gray300" fontFamily="Feather" />}
-            onChangeText={(val) => {
-              getSearch(val, 'nearby(31.983908,118.730357,10000)').then(
-                (res) => {
-                  setPoints(res.pois);
-                }
-              );
-            }}
-          />
-        </Div>
-      </Div>
-      <ScrollView
-        contentContainerStyle={{
-          flexGrow: 1,
-          backgroundColor: '#fff',
-        }}
-      >
-        <Div px={15}>
-          {points.map((item) => {
-            return (
-              <AddressItem
-                info={item}
-                key={item.id}
-                onPress={() => {
-                  navigation.navigate('Home');
-                }}
-              />
-            );
-          })}
-        </Div>
-      </ScrollView>
-    </>
-  );
-}
-
-function AddressItem({ info, onPress }) {
-  const distance =
-    info._distance > 1000
-      ? `${(info._distance / 1000).toFixed(2)}km`
-      : `${info._distance}m`;
-  return (
-    <Button bg="hide" block p={0} onPress={onPress}>
-      <Div borderBottomWidth={1} borderColor="gray200" py={5} flex={1}>
-        <Div row alignItems="center">
-          <Text fontSize="xl" flex={1} fontWeight="bold">
-            {info.title}
-          </Text>
-          <Text fontSize="sm" color="gray300">
-            {distance}
-          </Text>
-        </Div>
-        <Text fontSize="sm" color="gray300" mt={5}>
-          {info.address}
-        </Text>
-      </Div>
-    </Button>
-  );
-}

screens/Map/SearchMapScreen.jsx

@@ -1,15 +1,18 @@
+/* eslint-disable react/style-prop-object */
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { StatusBar } from 'expo-status-bar';
 import { Div } from 'react-native-magnus';
 import { Appbar } from 'react-native-paper';
 import { WebView } from 'react-native-webview';
+import { useTranslation } from 'react-i18next';
 
 import { useRoute } from '@react-navigation/native';
 import useModel from 'flooks';
 import MapModel from './model';
 
 export default function MapScreen({ navigation }) {
+  const { t } = useTranslation();
   const { locationInfo, changeChooseInfo } = useModel(MapModel, [
     'locationInfo',
   ]);
@@ -44,7 +47,7 @@ export default function MapScreen({ navigation }) {
       >
         <Appbar.BackAction onPress={navigation.goBack} />
         <Appbar.Content
-          title="选择收货地址"
+          title={t('xuan-ze-shou-huo-di-zhi')}
           titleStyle={{ textAlign: 'center', fontSize: 16 }}
         />
         <Div w={56} h={56} />

screens/Order/ApplayCancelScreen.jsx

@@ -4,8 +4,9 @@ import { Platform } from 'react-native';
 import { Div, Button, Text, Icon } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { TextareaItem } from '@ant-design/react-native';
+import { useTranslation } from 'react-i18next';
 
-import { PullPicker } from 'teaset';
+// import { PullPicker } from 'teaset';
 
 import { useRoute } from '@react-navigation/native';
 import { useCreation } from '@umijs/hooks';
@@ -17,6 +18,7 @@ import ImagePicker from '../../components/ImagePicker';
 import { reasonMap } from '../../Utils/OrderUtils';
 
 export default function ApplayCancelScreen({ navigation }) {
+  const { t } = useTranslation();
   const { cancelOrder } = useModel(Order, []);
 
   const [imgList, setimgList] = React.useState(['']);
@@ -64,7 +66,7 @@ export default function ApplayCancelScreen({ navigation }) {
 
   return (
     <>
-      <Header title="申请取消订单" />
+      <Header title={t('shen-qing-qu-xiao-ding-dan')} />
       <ScrollView
         contentContainerStyle={{
           flexGrow: 1,
@@ -73,8 +75,7 @@ export default function ApplayCancelScreen({ navigation }) {
       >
         <Div p={15} bg="white">
           <Text fontSize="xs" color="gray500">
-            商家和骑手已经接单，并在火速赶来，商家可以j拒绝您取消订单。建议您可
-            以和商家先联系下。
+            {t('tips1')}
           </Text>
 
           <Button
@@ -85,16 +86,16 @@ export default function ApplayCancelScreen({ navigation }) {
             color="black"
             mt={13}
           >
-            联系商家
+            {t('lian-xi-shang-jia')}
           </Button>
         </Div>
         <Div bg="white" mt={2} p={15}>
           <Text color="gray500" fontSize="xs">
-            您如果确定取消，
+            {t('nin-ru-guo-que-ding-qu-xiao')}，
             <Text color="red500" fontSize="xs">
-              请务必填写真实原因
+              {t('qing-wu-bi-tian-xie-zhen-shi-yuan-yin')}
             </Text>
-            ，以使我们可以更好地帮您解决问题。
+            ，{t('yi-shi-wo-men-ke-yi-geng-hao-di-bang-nin-jie-jue-wen-ti')}。
           </Text>
 
           <Button
@@ -106,7 +107,7 @@ export default function ApplayCancelScreen({ navigation }) {
               if (Platform.OS !== 'web') {
                 const list = [...reasonMap.keys()];
                 PullPicker.show(
-                  '取消原因',
+                  t('qu-xiao-yuan-yin'),
                   list,
                   chooseReason ? list.indexOf(chooseReason) : '',
                   (item) => {
@@ -123,7 +124,7 @@ export default function ApplayCancelScreen({ navigation }) {
           >
             <Div flex={1} row>
               <Text color="gray500" fontSize="xs">
-                取消原因
+                {t('qu-xiao-yuan-yin')}
               </Text>
               <Text flex={1} textAlign="right" fontSize="xs" mx={10}>
                 {chooseReason ? reasonMap.get(chooseReason).name : ''}
@@ -136,7 +137,7 @@ export default function ApplayCancelScreen({ navigation }) {
             <TextareaItem
               last
               rows={4}
-              placeholder="为了让我们更直观的了解情况，请补充详细信息！"
+              placeholder={t('tips2')}
               count={50}
               style={{
                 backgroundColor: '#fff',
@@ -172,7 +173,7 @@ export default function ApplayCancelScreen({ navigation }) {
             disabled={!canSubmit}
             onPress={onSubmit}
           >
-            申请取消
+            {t('shen-qing-qu-xiao')}
           </Button>
         </Div>
       </ScrollView>

screens/Order/ComplaintNextScreen.jsx

@@ -4,6 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import { Flex, TextareaItem } from '@ant-design/react-native';
 import { Div, Button } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
+import { useTranslation } from 'react-i18next';
 
 import { useRoute } from '@react-navigation/native';
 import { useCreation } from '@umijs/hooks';
@@ -22,6 +23,7 @@ const Name = new Map([
 ]);
 
 export default function ComplaintScreen({ navigation }) {
+  const { t } = useTranslation();
   const { complaintSave } = useModel(Order, []);
 
   const route = useRoute();
@@ -72,13 +74,14 @@ export default function ComplaintScreen({ navigation }) {
 
   return (
     <>
-      <Header title="订单投诉" />
+      <Header title={t('ding-dan-tou-su')} />
       <ScrollView contentContainerStyle={styles.scroll}>
         <View style={styles.card}>
           <Flex>
             <Flex.Item>
               <Text size="c2" type="info">
-                投诉{Name.get(target)}
+                {t('tou-su')}
+                {Name.get(target)}
               </Text>
             </Flex.Item>
             <Text size="c2">{type || ''}</Text>
@@ -86,7 +89,7 @@ export default function ComplaintScreen({ navigation }) {
           <View style={styles.textarea}>
             <TextareaItem
               rows={4}
-              placeholder="可补充具体投诉内容，您的投诉真实性对我们的处理至关重要"
+              placeholder={t('content1')}
               style={styles.text}
               count={100}
               onChange={setcontent}
@@ -115,7 +118,7 @@ export default function ComplaintScreen({ navigation }) {
           onPress={submit}
           disabled={!canSubmit}
         >
-          提交
+          {t('ti-jiao')}
         </Button>
       </ScrollView>
     </>

screens/Order/ComplaintScreen.jsx

@@ -6,6 +6,7 @@ import { TouchableRipple, Divider } from 'react-native-paper';
 import { ScrollView } from 'react-native-gesture-handler';
 import { Div } from 'react-native-magnus';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import { useTranslation } from 'react-i18next';
 
 import { useRoute } from '@react-navigation/native';
 import { useRequest } from '@umijs/hooks';
@@ -32,6 +33,7 @@ const Types = new Map([
 ]);
 
 export default function ComplaintScreen({ navigation }) {
+  const { t } = useTranslation();
   const route = useRoute();
   const { params } = route;
   const { orderId } = params || 0;
@@ -49,11 +51,11 @@ export default function ComplaintScreen({ navigation }) {
 
   return (
     <>
-      <Header title="订单投诉" />
+      <Header title={t('ding-dan-tou-su')} />
       <ScrollView contentContainerStyle={styles.scroll}>
         <View style={styles.card}>
           <Text size="c2" type="info">
-            投诉商家
+            {t('tou-su-shang-jia')}
           </Text>
           <Text size="s1">{merchant.showName || ' '}</Text>
           <Divider />
@@ -86,7 +88,7 @@ export default function ComplaintScreen({ navigation }) {
 
         <View style={styles.card}>
           <Text size="c2" type="info">
-            投诉骑手
+            {t('tou-su-qi-shou')}
           </Text>
           <Text size="s1">胖待还</Text>
           <Divider />
@@ -120,11 +122,11 @@ export default function ComplaintScreen({ navigation }) {
           <Flex style={styles.bottom}>
             <Flex.Item>
               <Text size="c2" type="info">
-                未找到投诉项
+                {t('wei-zhao-dao-tou-su-xiang')}
               </Text>
             </Flex.Item>
             <Button size="small" outline>
-              联系客服
+              {t('lian-xi-ke-fu')}
             </Button>
           </Flex>
         </View>

screens/Order/EvaluateScreen.jsx

@@ -7,6 +7,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 
 import { useRoute } from '@react-navigation/native';
 import { useCreation, useRequest, useSet } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
 
 import useModel from 'flooks';
 import Order from './model'; // Order模块通用方法
@@ -36,6 +37,7 @@ const map = new Map([
 ]);
 
 export default function EvaluateScreen({ navigation }) {
+  const { t } = useTranslation();
   const { userAppraisal } = useModel(Order, []);
 
   const route = useRoute();
@@ -115,7 +117,7 @@ export default function EvaluateScreen({ navigation }) {
 
   return (
     <>
-      <Header title="评价完就有红包拿哦！" />
+      <Header title={t('tip3')} />
       <ScrollView contentContainerStyle={styles.scroll}>
         <View style={styles.card}>
           <Div row alignItems="center">
@@ -137,7 +139,7 @@ export default function EvaluateScreen({ navigation }) {
               猪猪费
             </Text>
             <Text fontSize="xs" color="gray300" textAlign="left">
-              已对骑手匿名
+              {t('tipss4')}
             </Text>
           </Div>
           <Choose chooseValue={choose} changeValue={setchoose} />
@@ -173,7 +175,7 @@ export default function EvaluateScreen({ navigation }) {
 
           <TextareaItem
             rows={4}
-            placeholder="说哪里好，哪里不够好。其他顾客想知道，商家也想知道"
+            placeholder={t('content2')}
             style={styles.text}
             count={100}
             onChange={setcontent}
@@ -193,7 +195,7 @@ export default function EvaluateScreen({ navigation }) {
               {merchant.showName || ' '}
             </Text>
             <Text fontSize="xs" color="gray300" textAlign="left">
-              已对商家匿名
+              {t('yi-dui-shang-jia-ni-ming')}
             </Text>
           </Div>
           <ChooseMerchant chooseValue={chooseMer} changeValue={setchooseMer} />
@@ -202,7 +204,7 @@ export default function EvaluateScreen({ navigation }) {
 
           <TextareaItem
             rows={4}
-            placeholder="说哪里好，哪里不够好。其他顾客想知道，商家也想知道"
+            placeholder={t('content2')}
             style={styles.text}
             count={100}
             onChange={setcontent2}
@@ -231,7 +233,7 @@ export default function EvaluateScreen({ navigation }) {
           onPress={submit}
           disabled={!canSubmit}
         >
-          提交
+          {t('ti-jiao')}
         </Button>
       </ScrollView>
     </>

screens/Order/Header.js

@@ -3,10 +3,13 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { Appbar, Menu } from 'react-native-paper';
+
+import { useTranslation } from 'react-i18next';
 import { useBoolean, useCreation } from '@umijs/hooks';
 import { goBack, navigate } from '../../navigation/RootNavigation';
 
 export default function Header({ title, noBack, bg, hasRight, orderId }) {
+  const { t } = useTranslation();
   const { state, setTrue, setFalse } = useBoolean(false);
   return (
     <>
@@ -31,7 +34,7 @@ export default function Header({ title, noBack, bg, hasRight, orderId }) {
       >
         {!noBack && <Appbar.BackAction onPress={goBack} />}
         <Appbar.Content
-          title={title || '我的订单'}
+          title={title || t('wo-de-ding-dan')}
           titleStyle={{ textAlign: 'center', fontSize: 16 }}
         />
         {!noBack && !hasRight && (
@@ -52,7 +55,7 @@ export default function Header({ title, noBack, bg, hasRight, orderId }) {
                   orderId,
                 });
               }}
-              title="取消订单"
+              title={t('qu-xiao-ding-dan')}
             />
           </Menu>
         )}

screens/Order/OrderDetailScreen.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable no-underscore-dangle */
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
@@ -19,6 +20,7 @@ import { Flex } from '@ant-design/react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { useRequest, useCreation, useMount } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
 
 import { useRoute } from '@react-navigation/native';
 import { useAnimation } from 'react-native-animation-hooks';
@@ -40,6 +42,7 @@ import Time from '../../Utils/TimeUtils';
 import MapScreen from '../Map/MapScreen';
 
 export default function OrderScreen({ navigation }) {
+  const { t } = useTranslation();
   const [orderInfo, setorderInfo] = React.useState({
     merchant: {},
     orderGoodsSpecs: [],
@@ -79,7 +82,7 @@ export default function OrderScreen({ navigation }) {
       })[0];
     } else {
       return {
-        name: '订单详情',
+        name: t('ding-dan-xiang-qing'),
       };
     }
   }, [orderInfo]);
@@ -257,7 +260,7 @@ export default function OrderScreen({ navigation }) {
                     orderInfo.userReceivedTime,
                     'yyyy-MM-DD HH:mm:ss'
                   ).getFormat('HH:mm')}
-                  送达
+                  {t('song-da')}
                 </Text>
               ) : (
                 <Text fontSize="xl">
@@ -269,12 +272,12 @@ export default function OrderScreen({ navigation }) {
                   >
                     {statusInfo.name}
                   </Text>
-                  预计
+                  {t('yu-ji')}
                   {new Time(
                     orderInfo.timeOfArrival,
                     'yyyy-MM-DD HH:mm:ss'
                   ).getFormat('HH:mm')}
-                  送达
+                  {t('song-da')}
                 </Text>
               ))}
             {cancelOrder && (
@@ -301,7 +304,7 @@ export default function OrderScreen({ navigation }) {
                 rounded={3}
                 onPress={() => connectKefu(orderId)}
               >
-                联系客服
+                {t('lian-xi-ke-fu')}
               </Button>
               {!finish && (
                 <Button
@@ -317,7 +320,7 @@ export default function OrderScreen({ navigation }) {
                     warnning('正在帮您联系骑手');
                   }}
                 >
-                  联系骑手
+                  {t('lian-xi-qi-shou')}
                 </Button>
               )}
               {!finish && (
@@ -334,7 +337,7 @@ export default function OrderScreen({ navigation }) {
                     warnning('正在帮您催单');
                   }}
                 >
-                  催单
+                  {t('cui-dan')}
                 </Button>
               )}
               {finish && !cancelOrder && (
@@ -353,7 +356,7 @@ export default function OrderScreen({ navigation }) {
                     });
                   }}
                 >
-                  打赏骑手
+                  {t('da-shang-qi-shou')}
                 </Button>
               )}
               {finish && !Allfinish && !cancelOrder && (
@@ -372,7 +375,7 @@ export default function OrderScreen({ navigation }) {
                     });
                   }}
                 >
-                  立即评价
+                  {t('li-ji-ping-jia')}
                 </Button>
               )}
             </Div>
@@ -396,7 +399,7 @@ export default function OrderScreen({ navigation }) {
                   warnning('正在帮您联系商家');
                 }}
               >
-                联系商家
+                {t('lian-xi-shang-jia')}
               </Button>
             </Div>
             <Div>
@@ -410,10 +413,10 @@ export default function OrderScreen({ navigation }) {
               <Flex.Item>
                 <Flex>
                   <Text fontSize="xs" color="gray300" textAlign="left">
-                    包装费
+                    {t('bao-zhuang-fei')}
                   </Text>
                   <Text fontSize="xs" color="gray300" textAlign="left">
-                    餐盒
+                    {t('can-he')}
                   </Text>
                 </Flex>
               </Flex.Item>
@@ -424,7 +427,7 @@ export default function OrderScreen({ navigation }) {
             <Flex style={styles.info}>
               <Flex.Item>
                 <Text fontSize="xs" color="gray300" textAlign="left">
-                  配送费（叮咚专送）
+                  {t('pei-song-fei-ding-dong-zhuan-song')}
                 </Text>
               </Flex.Item>
               <Text fontSize="xs" color="gray300" textAlign="left">
@@ -434,7 +437,7 @@ export default function OrderScreen({ navigation }) {
             <Flex style={styles.info}>
               <Flex.Item>
                 <Text fontSize="xs" color="gray300" textAlign="left">
-                  满减
+                  {t('man-jian')}
                 </Text>
               </Flex.Item>
               <Text fontSize="xs" color="red500" textAlign="left">
@@ -445,7 +448,7 @@ export default function OrderScreen({ navigation }) {
               <Flex style={styles.info}>
                 <Flex.Item>
                   <Text fontSize="xs" color="gray300" textAlign="left">
-                    首单
+                    {t('shou-dan')}
                   </Text>
                 </Flex.Item>
                 <Text fontSize="xs" color="red500" textAlign="left">
@@ -457,7 +460,7 @@ export default function OrderScreen({ navigation }) {
             <Flex style={styles.info}>
               <Flex.Item>
                 <Text fontSize="xs" color="gray300" textAlign="left">
-                  红包
+                  {t('hong-bao')}
                 </Text>
               </Flex.Item>
               <Text fontSize="xs" color="red500" textAlign="left">
@@ -465,17 +468,19 @@ export default function OrderScreen({ navigation }) {
               </Text>
             </Flex>
             <Flex style={styles.total} justify="end">
-              <Text size="s1">小计 ¥{orderInfo.realAmount}</Text>
+              <Text size="s1">
+                {t('xiao-ji')} ¥{orderInfo.realAmount}
+              </Text>
             </Flex>
           </View>
 
           <View style={[styles.card]}>
-            <Text size="c1">订单信息</Text>
+            <Text size="c1">{t('ding-dan-xin-xi')}</Text>
             <View style={styles.main}>
               <Flex style={styles.info2}>
                 <Flex.Item>
                   <Text fontSize="xs" textAlign="left">
-                    下单时间
+                    {t('xia-dan-shi-jian')}
                   </Text>
                 </Flex.Item>
                 <Text fontSize="xs" textAlign="left">
@@ -486,7 +491,7 @@ export default function OrderScreen({ navigation }) {
                 <Flex style={styles.info2}>
                   <Flex.Item>
                     <Text fontSize="xs" textAlign="left">
-                      送达时间
+                      {t('song-da-shi-jian')}
                     </Text>
                   </Flex.Item>
                   <Text fontSize="xs" textAlign="left">
@@ -497,7 +502,7 @@ export default function OrderScreen({ navigation }) {
                 <Flex style={styles.info2}>
                   <Flex.Item>
                     <Text fontSize="xs" textAlign="left">
-                      预计送达时间
+                      {t('yu-ji-song-da-shi-jian')}
                     </Text>
                   </Flex.Item>
                   <Text fontSize="xs" textAlign="left">
@@ -509,7 +514,7 @@ export default function OrderScreen({ navigation }) {
               <Flex style={styles.info2}>
                 <Flex.Item style={styles.address}>
                   <Text fontSize="xs" textAlign="left">
-                    收货地址
+                    {t('shou-huo-di-zhi')}
                   </Text>
                 </Flex.Item>
                 <Text fontSize="xs" textAlign="left">
@@ -519,7 +524,7 @@ export default function OrderScreen({ navigation }) {
               <Flex style={styles.info2}>
                 <Flex.Item>
                   <Text fontSize="xs" textAlign="left">
-                    配送骑手
+                    {t('pei-song-qi-shou')}
                   </Text>
                 </Flex.Item>
                 <Flex>
@@ -535,7 +540,7 @@ export default function OrderScreen({ navigation }) {
                       warnning('正在帮您联系骑手');
                     }}
                   >
-                    联系骑手
+                    {t('lian-xi-qi-shou')}
                   </Button>
                   <Text fontSize="xs" ml={20} textAlign="left">
                     周猩猩
@@ -544,7 +549,7 @@ export default function OrderScreen({ navigation }) {
               </Flex>
               <Flex style={styles.info2}>
                 <Text fontSize="xs" textAlign="left">
-                  订 单 号
+                  {t('ding-dan-hao')}
                 </Text>
                 <Text fontSize="xs" textAlign="right" ml={10} flex={1}>
                   {orderInfo.id}
@@ -559,17 +564,17 @@ export default function OrderScreen({ navigation }) {
                   rounded={3}
                   onPress={() => {
                     Clipboard.setString(orderInfo.id.toString());
-                    success('复制成功');
+                    success(t('fu-zhi-cheng-gong'));
                   }}
                   ml={5}
                 >
-                  复制
+                  {t('fu-zhi')}
                 </Button>
               </Flex>
               {payMap.has(orderInfo.payMethod) && (
                 <Flex style={styles.info2}>
                   <Text fontSize="xs" flex={1}>
-                    支付方式
+                    {t('zhi-fu-fang-shi')}
                   </Text>
                   <Text fontSize="xs" textAlign="left">
                     {payMap.get(orderInfo.payMethod).name}

screens/Order/OrderMessageScreen.jsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Div, Button, Image, Text, Avatar, Tag } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { TextareaItem } from '@ant-design/react-native';
-
+import { useTranslation } from 'react-i18next';
 import { useSet, useCreation } from '@umijs/hooks';
 import useModel from 'flooks';
 import Detail from '../Detail/model'; // detail模块通用方法
@@ -13,6 +13,7 @@ import Header from '../../components/Header';
 const messages = ['饮料不加冰', '不要辣'];
 
 export default function OrderMessageScreen({ navigation }) {
+  const { t } = useTranslation();
   const { remark, setRemark } = useModel(Detail, ['remark']);
 
   const [message, setmessage] = React.useState('');
@@ -29,7 +30,7 @@ export default function OrderMessageScreen({ navigation }) {
 
   return (
     <>
-      <Header title="订单备注" />
+      <Header title={t('ding-dan-bei-zhu')} />
       <ScrollView
         contentContainerStyle={{
           flexGrow: 1,
@@ -40,7 +41,7 @@ export default function OrderMessageScreen({ navigation }) {
           <TextareaItem
             defaultValue={remark}
             rows={4}
-            placeholder="可额外填写订单备注"
+            placeholder={t('keewai-tian-xie-ding-dan-bei-zhu')}
             style={{
               backgroundColor: '#eeeeee',
               paddingVertical: 10,
@@ -52,7 +53,7 @@ export default function OrderMessageScreen({ navigation }) {
           />
 
           <Text textAlign="left" fontSize="xs" color="gray300" py={10}>
-            常用标签
+            {t('chang-yong-biao-qian')}
           </Text>
 
           <Div row>
@@ -96,7 +97,7 @@ export default function OrderMessageScreen({ navigation }) {
             navigation.goBack();
           }}
         >
-          提交
+          {t('ti-jiao')}
         </Button>
       </ScrollView>
     </>

screens/Order/OrderScreen.jsx

@@ -4,7 +4,7 @@ import { StyleSheet, View, FlatList } from 'react-native';
 import { Div, Button, Text, Avatar, Image } from 'react-native-magnus';
 import { Flex } from '@ant-design/react-native';
 import { TouchableRipple } from 'react-native-paper';
-
+import { useTranslation } from 'react-i18next';
 import { useCreation, useRequest } from '@umijs/hooks';
 import { useFocusEffect } from '@react-navigation/native';
 import useModel from 'flooks';
@@ -17,10 +17,11 @@ import MapMarkImg from '../Map/MapMarkImg';
 import { getStatusInfo } from '../../Utils/OrderUtils';
 
 export default function OrderScreen({ navigation }) {
+  const { t } = useTranslation();
   const [orderList, setorderList] = React.useState();
 
-	const { success, warnning } = useModel(Toast, []);
-	const { again } = useModel(Order, []);
+  const { success, warnning } = useModel(Toast, []);
+  const { again } = useModel(Order, []);
   const orderRequest = useRequest('/orderInfo/my?sort=id,desc', {
     manual: true,
     onSuccess: (result) => {
@@ -28,8 +29,6 @@ export default function OrderScreen({ navigation }) {
     },
   });
 
-
-
   useFocusEffect(
     React.useCallback(() => {
       orderRequest.run();
@@ -65,7 +64,7 @@ export default function OrderScreen({ navigation }) {
             index={index}
             connect={(type) => {
               if (type === 'merchant') {
-                warnning('正在帮您联系商家');
+                warnning(t('connect1'));
               }
             }}
           />
@@ -85,6 +84,7 @@ function Item({
   goMerchant,
   connect,
 }) {
+  const { t } = useTranslation();
   const orderInfo =
     orderGoodsSpecs.length > 0 ? orderGoodsSpecs[0].goods.name : '';
 
@@ -106,28 +106,31 @@ function Item({
                 {merchant.name}
               </Text>
               {finish || Allfinish ? (
-                <Text fontSize="xs">已送达</Text>
+                <Text fontSize="xs">{t('yi-song-da')}</Text>
               ) : (
                 <Text fontSize="xs">
-                  预计
+                  {t('yu-ji')}
                   <Text color="red500">
                     {new Time(
                       info.timeOfArrival,
                       'yyyy-MM-DD HH:mm:ss'
                     ).getFormat('HH:mm')}
                   </Text>
-                  送达
+                  {t('song-da')}
                 </Text>
               )}
             </Div>
             <Text fontSize="xs" my={10}>
-              订单时间: {info.orderTime}
+              {t('ding-dan-shi-jian')}: {info.orderTime}
             </Text>
             <Div h={1} bg="gray200" />
             <Div row py={10} alignItems="center">
-              <Text fontSize="sm">订单商品</Text>
+              <Text fontSize="sm">{t('ding-dan-shang-pin')}</Text>
               <Text fontSize="xs" ml={5} flex={1}>
-                {orderInfo}等{info.num}件
+                {orderInfo}
+                {t('deng')}
+                {info.num}
+                {t('jian2')}
               </Text>
               <Text size="sm">¥{info.realAmount}</Text>
             </Div>
@@ -150,7 +153,7 @@ function Item({
               rounded={3}
               onPress={() => goNext('Evaluate')}
             >
-              立即评价
+              {t('li-ji-ping-jia')}
             </Button>
           ) : (
             <Button
@@ -163,7 +166,7 @@ function Item({
               rounded={3}
               onPress={() => connect('merchant')}
             >
-              联系商家
+              {t('lian-xi-shang-jia')}
             </Button>
           )}
 
@@ -179,7 +182,7 @@ function Item({
               ml={10}
               onPress={goMerchant}
             >
-              再来一单
+              {t('zai-lai-yi-dan')}
             </Button>
           )}
         </Flex>

screens/Order/RewardRiderScreen.jsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Div, Button, Image, Text } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 
+import { useTranslation } from 'react-i18next';
 import useModel from 'flooks';
 import Order from './model'; // Order模块通用方法
 
@@ -11,6 +12,7 @@ import Header from '../../components/Header';
 
 export default function RewardRiderScreen({ navigation }) {
   const { rewardRider } = useModel(Order, []);
+  const { t } = useTranslation();
 
   const reward = () => {
     rewardRider().then(() => {
@@ -20,7 +22,7 @@ export default function RewardRiderScreen({ navigation }) {
 
   return (
     <>
-      <Header title="打赏骑手" />
+      <Header title={t('da-shang-qi-shou')} />
       <ScrollView
         contentContainerStyle={{
           flexGrow: 1,
@@ -45,21 +47,21 @@ export default function RewardRiderScreen({ navigation }) {
                 bg="white"
                 color="black"
               >
-                联系骑手
+                {t('lian-xi-qi-shou')}
               </Button>
             </Div>
           </Div>
 
           <Div row mt={5}>
             <Div flex={1} row>
-              <Text fontSize="xs">准时率</Text>
+              <Text fontSize="xs">{t('zhun-shi-shuai')}</Text>
               <Text fontSize="xs" ml={13}>
                 100%
               </Text>
             </Div>
 
             <Div flex={1} row>
-              <Text fontSize="xs">日均送单</Text>
+              <Text fontSize="xs">{t('ri-jun-song-dan')}</Text>
               <Text fontSize="xs" ml={13}>
                 99
               </Text>
@@ -135,10 +137,10 @@ export default function RewardRiderScreen({ navigation }) {
 
         <Div bg="white" mt={10} mx={10} px={10} pt={10} pb={30}>
           <Text fontSize="xl" fontWeight="bold">
-            打赏骑手
+            {t('da-shang-qi-shou')}
           </Text>
           <Text fontSize="xs" color="gray500" mt={10}>
-            打赏将全额转给骑手
+            {t('da-shang-jiang-quanezhuan-gei-qi-shou')}
           </Text>
           <Text fontSize="xs" color="gray500" mt={10}>
             上次为您提前12:02分钟送达订单哦
@@ -161,7 +163,7 @@ export default function RewardRiderScreen({ navigation }) {
                 block
                 onPress={reward}
               >
-                打赏
+                {t('da-shang')}
               </Button>
             </Div>
             <Div w="33.33%" px={3} alignItems="center">
@@ -180,7 +182,7 @@ export default function RewardRiderScreen({ navigation }) {
                 block
                 onPress={reward}
               >
-                打赏
+                {t('da-shang')}
               </Button>
             </Div>
             <Div w="33.33%" px={3} alignItems="center">
@@ -200,7 +202,7 @@ export default function RewardRiderScreen({ navigation }) {
                 block
                 onPress={reward}
               >
-                打赏
+                {t('da-shang')}
               </Button>
             </Div>
           </Div>

screens/Pay/PayCom.jsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Div, Button, Text, Icon } from 'react-native-magnus';
 
 import { Modal, Portal } from 'react-native-paper';
-
+import { useTranslation } from 'react-i18next';
 import useModel from 'flooks';
 import Detail from '../Detail/model';
 
@@ -58,6 +58,7 @@ const PayImtem = ({ mapKey, isChoose, changePay }) => {
 };
 
 export default function PayCom() {
+  const { t } = useTranslation();
   const [visible, changeVisible] = React.useState(false);
   const { payMethod, merchantInfo, changePay } = useModel(Detail, [
     'payMethod',
@@ -70,11 +71,13 @@ export default function PayCom() {
       <Button block bg="white" p="none" onPress={() => changeVisible(true)}>
         <Div row flex={1} alignItems="center" h={40}>
           <Text fontSize="xl" textAlign="left">
-            支付方式
+            {t('zhi-fu-fang-shi')}
           </Text>
           <Div flex={1} />
           <Text color="brand500" fontSize="xl" mr={5} textAlign="left">
-            {payMap.has(payMethod) ? payMap.get(payMethod).name : '请选择'}
+            {payMap.has(payMethod)
+              ? payMap.get(payMethod).name
+              : t('qing-xuan-ze')}
           </Text>
           <Icon name="right" color="#000" />
         </Div>

screens/User/AppSettingScreen.jsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import * as Application from 'expo-application';
 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 '../../flooks/User';
@@ -11,6 +12,7 @@ import Header from '../../components/Header';
 
 export default function AppSettingScreen() {
   const { logout } = useModel(User, []);
+  const { t } = useTranslation();
 
   return (
     <>
@@ -18,18 +20,18 @@ export default function AppSettingScreen() {
       <ScrollView>
         <Div row bg="white" p={20} mt={10}>
           <Text fontSize="sm" textAlign="left" flex={1}>
-            登录密码
+            {t('deng-lu-mi-ma')}
           </Text>
 
           <Text fontSize="sm" textAlign="left">
-            设置密码
+            {t('she-zhi-mi-ma')}
           </Text>
           <Icon name="right" fontSize="xl" />
         </Div>
 
         <Div row bg="white" p={20} mt={10}>
           <Text fontSize="sm" textAlign="left" flex={1}>
-            版本号
+            {t('ban-ben-hao')}
           </Text>
           <Text fontSize="sm" textAlign="left">
             v{Application.nativeApplicationVersion}
@@ -38,7 +40,7 @@ export default function AppSettingScreen() {
         </Div>
 
         <Button block bg="brand500" m={10} onPress={logout}>
-          退出登录
+          {t('tui-chu-deng-lu')}
         </Button>
       </ScrollView>
     </>

screens/User/ApplyScreen.jsx

@@ -1,7 +1,7 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { Div, Button } from 'react-native-magnus';
-
+import { useTranslation } from 'react-i18next';
 import Header from '../../components/Header';
 
 const info = new Map([
@@ -29,6 +29,7 @@ const info = new Map([
 ]);
 
 export default function ApplyScreen({ navigation, route }) {
+  const { t } = useTranslation();
   const { params } = route;
   const { type } = params;
 
@@ -45,7 +46,7 @@ export default function ApplyScreen({ navigation, route }) {
         block
         onPress={() => navigation.navigate(nowInfo.next)}
       >
-        立即申请
+        {t('li-ji-shen-qing')}
       </Button>
     </>
   );

screens/User/CollectionScreen.jsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 
+import { useTranslation } from 'react-i18next';
 import { useRequest } from '@umijs/hooks';
 import useModel from 'flooks';
 import User from '../../flooks/User'; // detail模块通用方法
@@ -11,6 +12,7 @@ import Header from '../../components/Header';
 import MerchantCom from '../Main/Home/MerchantCom';
 
 export default function CollectionScreen() {
+  const { t } = useTranslation();
   const { id } = useModel(User, ['id']);
   const [Collection, setCollection] = React.useState([]);
   const CollectionRequest = useRequest(
@@ -36,14 +38,14 @@ export default function CollectionScreen() {
   );
   return (
     <>
-      <Header title="我的收藏" />
+      <Header title={t('wo-de-shou-cang')} />
       <ScrollView
         contentContainerStyle={{ backgroundColor: '#fff', flexGrow: 1 }}
       >
         {Collection.length === 0 && (
           <Div p={10}>
             <Text color="gray300" textAlign="center">
-              暂无数据
+              {t('zan-wu-shu-ju')}
             </Text>
           </Div>
         )}

screens/User/CompanyApplyScreen.jsx

@@ -4,6 +4,7 @@ import { Div, Button, Text } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { InputItem, TextareaItem } from '@ant-design/react-native';
 import { useRequest, useCreation } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
 import useModel from 'flooks';
 import User from '../../flooks/User'; // detail模块通用方法
 import Toast from '../../flooks/Toast'; // detail模块通用方法
@@ -18,6 +19,7 @@ function saveRequest(data) {
 }
 
 export default function CompanyApplyScreen({ navigation }) {
+  const { t } = useTranslation();
   const { userInfo } = useModel(User, ['id']);
   const { warnning, success } = useModel(Toast, []);
 
@@ -31,7 +33,7 @@ export default function CompanyApplyScreen({ navigation }) {
       warnning(e.error);
     },
     onSuccess: () => {
-      success('申请提交成功');
+      success(t('shen-qing-ti-jiao-cheng-gong'));
       navigation.goBack();
     },
   });
@@ -46,7 +48,7 @@ export default function CompanyApplyScreen({ navigation }) {
 
   return (
     <>
-      <Header title="商务合作申请" />
+      <Header title={t('shang-wu-he-zuo-shen-qing')} />
       <ScrollView
         contentContainerStyle={{
           backgroundColor: '#fff',
@@ -59,10 +61,10 @@ export default function CompanyApplyScreen({ navigation }) {
             type="phone"
             value={name}
             onChange={setname}
-            placeholder="输入联系人"
+            placeholder={t('shu-ru-lian-xi-ren')}
             style={{ fontSize: 14 }}
           >
-            <Text fontSize="sm">姓名</Text>
+            <Text fontSize="sm">{t('xing-ming')}</Text>
           </InputItem>
 
           <InputItem
@@ -70,18 +72,18 @@ export default function CompanyApplyScreen({ navigation }) {
             type="phone"
             value={phone}
             onChange={setphone}
-            placeholder="输入联系电话"
+            placeholder={t('shu-ru-lian-xi-dian-hua')}
             style={{ fontSize: 14 }}
           >
-            <Text fontSize="sm">联系电话</Text>
+            <Text fontSize="sm">{t('lian-xi-dian-hua')}</Text>
           </InputItem>
           <Text px={15} py={10} fontSize="sm">
-            期望合作的内容
+            {t('qi-wang-he-zuo-de-nei-rong')}
           </Text>
           <Div px={15}>
             <TextareaItem
               rows={4}
-              placeholder="添加商品简介（不超过50字）"
+              placeholder={t('tian-jia-shang-pin-jian-jie-bu-chao-guo-50-zi')}
               style={{ backgroundColor: '#eee', fontSize: 14, paddingTop: 10 }}
               onChange={(text) => setremark(text)}
             />
@@ -103,7 +105,7 @@ export default function CompanyApplyScreen({ navigation }) {
             });
           }}
         >
-          提交
+          {t('ti-jiao')}
         </Button>
       </ScrollView>
     </>

screens/User/CooperationScreen.jsx

@@ -1,28 +1,31 @@
+/* eslint-disable global-require */
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
+import { useTranslation } from 'react-i18next';
 
 import { List } from 'react-native-paper';
 
 import Header from '../../components/Header';
 
 export default function CooperationScreen({ navigation }) {
+  const { t } = useTranslation();
   return (
     <>
-      <Header title="合作申请" />
+      <Header title={t('he-zuo-shen-qing')} />
       <ScrollView>
         <Div bg="white" mb={5}>
           <List.Item
-            title="商家入驻"
+            title={t('shang-jia-ru-zhu')}
             description={() => {
               return (
                 <Div mt={10}>
                   <Text fontSize="xs" color="gray300" textAlign="left">
-                    美食、甜品饮料、水果、按摩商家已入驻
+                    {t('tips5')}
                   </Text>
                   <Text fontSize="xs" color="gray300" textAlign="left">
-                    商家入驻合作请联系13455324344（联系方式）
+                    {t('tips6')}13455324344（{t('lian-xi-fang-shi')}）
                   </Text>
                 </Div>
               );
@@ -42,15 +45,16 @@ export default function CooperationScreen({ navigation }) {
         </Div>
         <Div bg="white" mb={5}>
           <List.Item
-            title="骑手招募"
+            title={t('qi-shou-zhao-mu')}
             description={() => {
               return (
                 <Div mt={10}>
                   <Text fontSize="xs" color="gray300" textAlign="left">
-                    多劳多得、上不封顶、时间自由
+                    {t('rider')}
                   </Text>
                   <Text fontSize="xs" color="gray300" textAlign="left">
-                    骑手招募合作请联系13455324344（联系方式）
+                    {t('rider2')}
+                    13455324344（{t('lian-xi-fang-shi')}）
                   </Text>
                 </Div>
               );
@@ -70,12 +74,13 @@ export default function CooperationScreen({ navigation }) {
         </Div>
         <Div bg="white" mb={5}>
           <List.Item
-            title="商务合作"
+            title={t('shang-wu-he-zuo')}
             description={() => {
               return (
                 <Div mt={10}>
                   <Text fontSize="xs" color="gray300" textAlign="left">
-                    骑手招募合作请联系13455324344（联系方式）
+                    {t('shang-wu-he-zuo-qing-lian-xi')}13455324344（
+                    {t('lian-xi-fang-shi')}）
                   </Text>
                 </Div>
               );

screens/User/FeedBackScreen.jsx

@@ -4,6 +4,7 @@ import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { InputItem, TextareaItem } from '@ant-design/react-native';
 import { useRequest, useCreation } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
 import useModel from 'flooks';
 import User from '../../flooks/User'; // detail模块通用方法
 import Toast from '../../flooks/Toast'; // detail模块通用方法
@@ -20,6 +21,7 @@ function saveRequest(data) {
 }
 
 export default function FeedBackScreen({ navigation }) {
+  const { t } = useTranslation();
   const { userInfo } = useModel(User, ['id']);
   const { warnning, success } = useModel(Toast, []);
 
@@ -56,14 +58,9 @@ export default function FeedBackScreen({ navigation }) {
       warnning(e.error);
     },
     onSuccess: () => {
-      alertWithoutCancel(
-        '',
-        '感谢您的反馈，我们将根据您的反馈优化产品或服务，为您提供更好的使用体验',
-        false,
-        () => {
-          navigation.goBack();
-        }
-      );
+      alertWithoutCancel('', t('fankui1'), false, () => {
+        navigation.goBack();
+      });
     },
   });
 
@@ -92,13 +89,12 @@ export default function FeedBackScreen({ navigation }) {
         }}
       >
         <Text px={15} py={10} fontSize="sm" color="gray500">
-          您对我们有什么意见或建议，或者遇到的问题反馈给我们，以
-          便我们为您提供更好的服务（必填）
+          {t('fankui2')}
         </Text>
         <Div px={15}>
           <TextareaItem
             rows={4}
-            placeholder="最多500字"
+            placeholder={t('zui-duo-500-zi')}
             count={500}
             style={{
               backgroundColor: '#eee',
@@ -122,14 +118,14 @@ export default function FeedBackScreen({ navigation }) {
           })}
         </Div>
         <Text px={15} pt={10} fontSize="sm">
-          请输入联系信息（选填）
+          {t('qing-shu-ru-lian-xi-xin-xi-xuan-tian')}
         </Text>
         <InputItem
           clear
           type="phone"
           value={name}
           onChange={setname}
-          placeholder="输入联系人"
+          placeholder={t('shu-ru-lian-xi-ren')}
           style={{
             fontSize: 14,
             backgroundColor: '#eee',
@@ -138,7 +134,7 @@ export default function FeedBackScreen({ navigation }) {
           }}
           last
         >
-          <Text fontSize="sm">姓名</Text>
+          <Text fontSize="sm">{t('xing-ming')}</Text>
         </InputItem>
 
         <InputItem
@@ -146,7 +142,7 @@ export default function FeedBackScreen({ navigation }) {
           type="phone"
           value={phone}
           onChange={setphone}
-          placeholder="输入联系电话"
+          placeholder={t('shu-ru-lian-xi-dian-hua')}
           style={{
             fontSize: 14,
             backgroundColor: '#eee',
@@ -155,11 +151,11 @@ export default function FeedBackScreen({ navigation }) {
           }}
           last
         >
-          <Text fontSize="sm">联系电话</Text>
+          <Text fontSize="sm">{t('lian-xi-dian-hua')}</Text>
         </InputItem>
 
         <Text fontSize="xs" color="gray500" pl={85}>
-          联系人信息将为您加密传输，保护您的隐私
+          {t('tips8')}
         </Text>
         <Button
           my={30}
@@ -178,7 +174,7 @@ export default function FeedBackScreen({ navigation }) {
             });
           }}
         >
-          提交反馈
+          {t('ti-jiao-fan-kui')}
         </Button>
       </ScrollView>
     </>

screens/User/MerchatApplyScreen.jsx

@@ -4,6 +4,7 @@ import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 import { InputItem } from '@ant-design/react-native';
 import { useRequest, useCreation } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
 import useModel from 'flooks';
 import User from '../../flooks/User'; // detail模块通用方法
 import Toast from '../../flooks/Toast'; // detail模块通用方法
@@ -18,6 +19,7 @@ function saveRequest(data) {
 }
 
 export default function MerchatApplyScreen({ navigation }) {
+  const { t } = useTranslation();
   const { userInfo } = useModel(User, ['id']);
   const { warnning, success } = useModel(Toast, []);
 
@@ -33,7 +35,7 @@ export default function MerchatApplyScreen({ navigation }) {
       warnning(e.error);
     },
     onSuccess: () => {
-      success('申请提交成功');
+      success(t('shen-qing-ti-jiao-cheng-gong'));
       navigation.goBack();
     },
   });
@@ -48,7 +50,7 @@ export default function MerchatApplyScreen({ navigation }) {
 
   return (
     <>
-      <Header title="开店申请" />
+      <Header title={t('kai-dian-shen-qing')} />
       <ScrollView
         contentContainerStyle={{
           backgroundColor: '#fff',
@@ -61,10 +63,10 @@ export default function MerchatApplyScreen({ navigation }) {
             type="phone"
             value={name}
             onChange={setname}
-            placeholder="输入联系人"
+            placeholder={t('shu-ru-lian-xi-ren')}
             style={{ fontSize: 14 }}
           >
-            <Text fontSize="sm">联系人</Text>
+            <Text fontSize="sm">{t('lian-xi-ren')}</Text>
           </InputItem>
 
           <InputItem
@@ -72,39 +74,39 @@ export default function MerchatApplyScreen({ navigation }) {
             type="phone"
             value={phone}
             onChange={setphone}
-            placeholder="输入联系电话"
+            placeholder={t('shu-ru-lian-xi-dian-hua')}
             style={{ fontSize: 14 }}
           >
-            <Text fontSize="sm">联系电话</Text>
+            <Text fontSize="sm">{t('lian-xi-dian-hua')}</Text>
           </InputItem>
 
           <InputItem
             clear
             value={merName}
             onChange={setmerName}
-            placeholder="输入店铺名称"
+            placeholder={t('shu-ru-dian-pu-ming-cheng')}
             style={{ fontSize: 14 }}
           >
-            <Text fontSize="sm">店铺名称</Text>
+            <Text fontSize="sm">{t('dian-pu-ming-cheng')}</Text>
           </InputItem>
 
           <InputItem
             clear
             value={category}
             onChange={setcategory}
-            placeholder="输入经营类型"
+            placeholder={t('shu-ru-jing-ying-lei-xing')}
             style={{ fontSize: 14 }}
           >
-            <Text fontSize="sm">经营类型</Text>
+            <Text fontSize="sm">{t('jing-ying-lei-xing')}</Text>
           </InputItem>
           <InputItem
             clear
             value={address}
             onChange={setaddress}
-            placeholder="请输入店铺地址"
+            placeholder={t('qing-shu-ru-dian-pu-di-zhi')}
             style={{ fontSize: 14 }}
           >
-            <Text fontSize="sm">店铺地址</Text>
+            <Text fontSize="sm">{t('dian-pu-di-zhi')}</Text>
           </InputItem>
         </Div>
 
@@ -126,7 +128,7 @@ export default function MerchatApplyScreen({ navigation }) {
             });
           }}
         >
-          提交
+          {t('ti-jiao')}
         </Button>
       </ScrollView>
     </>

screens/User/RiderApplyScreen.jsx

@@ -5,6 +5,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { InputItem } from '@ant-design/react-native';
 import { useRequest, useCreation } from '@umijs/hooks';
 import useModel from 'flooks';
+import { useTranslation } from 'react-i18next';
 import User from '../../flooks/User'; // detail模块通用方法
 import Toast from '../../flooks/Toast'; // detail模块通用方法
 
@@ -18,6 +19,7 @@ function saveRequest(data) {
 }
 
 export default function RiderApplyScreen({ navigation }) {
+  const { t } = useTranslation();
   const { userInfo } = useModel(User, ['id']);
   const { warnning, success } = useModel(Toast, []);
 
@@ -31,7 +33,7 @@ export default function RiderApplyScreen({ navigation }) {
       warnning(e.error);
     },
     onSuccess: () => {
-      success('申请提交成功');
+      success(t('shen-qing-ti-jiao-cheng-gong'));
       navigation.goBack();
     },
   });
@@ -46,7 +48,7 @@ export default function RiderApplyScreen({ navigation }) {
 
   return (
     <>
-      <Header title="骑手申请" />
+      <Header title={t('qi-shou-shen-qing')} />
       <ScrollView
         contentContainerStyle={{
           backgroundColor: '#fff',
@@ -59,11 +61,11 @@ export default function RiderApplyScreen({ navigation }) {
             type="phone"
             value={name}
             onChange={setname}
-            placeholder="输入联系人"
+            placeholder={t('shu-ru-lian-xi-ren')}
             style={{ fontSize: 14 }}
             labelNumber={7}
           >
-            <Text fontSize="sm">姓名</Text>
+            <Text fontSize="sm">{t('xing-ming')}</Text>
           </InputItem>
 
           <InputItem
@@ -71,22 +73,22 @@ export default function RiderApplyScreen({ navigation }) {
             type="phone"
             value={phone}
             onChange={setphone}
-            placeholder="输入联系电话"
+            placeholder={t('shu-ru-lian-xi-dian-hua')}
             style={{ fontSize: 14 }}
             labelNumber={7}
           >
-            <Text fontSize="sm">联系电话</Text>
+            <Text fontSize="sm">{t('lian-xi-dian-hua')}</Text>
           </InputItem>
 
           <InputItem
             clear
             value={address}
             onChange={setaddress}
-            placeholder="请输入期望的工作地址"
+            placeholder={t('address')}
             style={{ fontSize: 14 }}
             labelNumber={7}
           >
-            <Text fontSize="sm">期望的工作地址</Text>
+            <Text fontSize="sm">{t('addrss2')}</Text>
           </InputItem>
         </Div>
 
@@ -106,7 +108,7 @@ export default function RiderApplyScreen({ navigation }) {
             });
           }}
         >
-          提交
+          {t('ti-jiao')}
         </Button>
       </ScrollView>
     </>

screens/User/RuleScreen.jsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import * as Application from 'expo-application';
 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 '../../flooks/User';
@@ -11,10 +12,11 @@ import Header from '../../components/Header';
 
 export default function RuleScreen() {
   const { logout } = useModel(User, []);
+  const { t } = useTranslation();
 
   return (
     <>
-      <Header title="隐私条款" />
+      <Header title={t('yin-si-tiao-kuan')} />
       <Div
         bg="white"
         mt={10}
@@ -24,7 +26,7 @@ export default function RuleScreen() {
         borderColor="gray200"
         borderBottomWidth={1}
       >
-        <Text fontSize="sm">隐私政策</Text>
+        <Text fontSize="sm">{t('yin-si-zheng-ce')}</Text>
       </Div>
       <ScrollView>
         <Div p={10} bg="white">

screens/User/SettingScreen.jsx

@@ -4,6 +4,7 @@ import { Div, Button, Text } from 'react-native-magnus';
 import { TouchableRipple } from 'react-native-paper';
 import { ScrollView } from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import { useTranslation } from 'react-i18next';
 
 import useModel from 'flooks';
 import User from '../../flooks/User'; // detail模块通用方法
@@ -14,18 +15,19 @@ import ImagePicker from '../../components/ImagePicker';
 import { prompt } from '../../Utils/TotastUtils';
 
 export default function LinksScreen() {
+  const { t } = useTranslation();
   const { userInfo, uploadInfo, logout } = useModel(User, ['userInfo']);
   const { avatar, nickname } = userInfo || {
-    nickname: '未登录',
+    nickname: t('wei-deng-lu'),
     avatar: '',
   };
 
   return (
     <>
-      <Header title="个人资料" />
+      <Header title={t('ge-ren-zi-liao')} />
       <ScrollView>
         <Div row bg="white" rounded="none" p={9} alignItems="center" my={5}>
-          <Text flex={1}>头像：</Text>
+          <Text flex={1}>{t('tou-xiang')}：</Text>
           <ImagePicker
             img={avatar}
             h={33}
@@ -36,7 +38,7 @@ export default function LinksScreen() {
         </Div>
         <TouchableRipple
           onPress={() => {
-            prompt('昵称', '请输入昵称', nickname, (val) =>
+            prompt(t('ni-cheng'), t('qing-shu-ru-ni-cheng'), nickname, (val) =>
               uploadInfo({ nickname: val })
             );
           }}
@@ -50,7 +52,7 @@ export default function LinksScreen() {
             my={5}
             minH={51}
           >
-            <Text flex={1}>昵称：</Text>
+            <Text flex={1}>{t('ni-cheng')}：</Text>
             <Text mr={5}>{nickname}</Text>
             <Icon name="angle-right" color="#000" />
           </Div>

screens/User/UserScreen.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 /* eslint-disable react/style-prop-object */
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
@@ -7,6 +8,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { StatusBar } from 'expo-status-bar';
 import Constants from 'expo-constants';
 import { useCreation } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
 
 import useModel from 'flooks';
 import User from '../../flooks/User'; // detail模块通用方法
@@ -16,6 +18,7 @@ import UserCoupon from '../userCoupon/SettingCom';
 import { connectKefuOn } from '../../Utils/TotastUtils';
 
 export default function UserScreen({ navigation }) {
+  const { t } = useTranslation();
   const { userInfo } = useModel(User, ['id']);
   const { avatar, nickname, username } = userInfo || {
     nickname: '未登录',
@@ -29,7 +32,7 @@ export default function UserScreen({ navigation }) {
   }, [nickname]);
 
   const showUser = useCreation(() => {
-    let name = username.substring(4, 7);
+    const name = username.substring(4, 7);
     if (name) {
       return username.replace(name, '****');
     } else {
@@ -74,14 +77,15 @@ export default function UserScreen({ navigation }) {
               {showNick}
             </Text>
             <Text fontSize="sm" textAlign="left">
-              叮咚外卖{showUser}
+              {t('ding-dong-wai-mai')}
+              {showUser}
             </Text>
           </Div>
         </Div>
         <UserCoupon />
         <Div bg="white" mb={5}>
           <List.Item
-            title="我的收藏"
+            title={t('wo-de-shou-cang')}
             left={(props) => (
               <List.Icon {...props} icon="heart-outline" color="#FFB11E" />
             )}
@@ -91,7 +95,7 @@ export default function UserScreen({ navigation }) {
         </Div>
         <Div bg="white" mb={5}>
           <List.Item
-            title="联系客服"
+            title={t('lian-xi-ke-fu')}
             left={(props) => (
               <List.Icon {...props} icon="headset" color="#FFB11E" />
             )}
@@ -101,7 +105,7 @@ export default function UserScreen({ navigation }) {
         </Div>
         <Div bg="white" mb={5}>
           <List.Item
-            title="我的地址"
+            title={t('wo-de-di-zhi')}
             left={(props) => (
               <List.Icon {...props} icon="map-marker-radius" color="#FFB11E" />
             )}
@@ -111,7 +115,7 @@ export default function UserScreen({ navigation }) {
         </Div>
         <Div bg="white" mb={5}>
           <List.Item
-            title="合作申请"
+            title={t('he-zuo-shen-qing')}
             left={(props) => (
               <List.Icon {...props} icon="briefcase" color="#FFB11E" />
             )}
@@ -121,7 +125,7 @@ export default function UserScreen({ navigation }) {
         </Div>
         <Div bg="white" mb={5}>
           <List.Item
-            title="设置"
+            title={t('she-zhi')}
             left={(props) => (
               <List.Icon {...props} icon="cogs" color="#FFB11E" />
             )}
@@ -131,7 +135,7 @@ export default function UserScreen({ navigation }) {
         </Div>
         <Div bg="white" mb={5}>
           <List.Item
-            title="隐私条款"
+            title={t('yin-si-tiao-kuan')}
             left={(props) => (
               <List.Icon {...props} icon="card-text" color="#FFB11E" />
             )}
@@ -141,7 +145,7 @@ export default function UserScreen({ navigation }) {
         </Div>
         <Div bg="white" mb={5}>
           <List.Item
-            title="意见反馈"
+            title={t('yi-jian-fan-kui')}
             left={(props) => (
               <List.Icon {...props} icon="tooltip-plus" color="#FFB11E" />
             )}

screens/userCoupon/CouponScreen.jsx

@@ -4,6 +4,8 @@ import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
 import { TouchableRipple } from 'react-native-paper';
 import { ScrollView } from 'react-native-gesture-handler';
 
+import { useTranslation } from 'react-i18next';
+
 import { useNavigation } from '@react-navigation/native';
 import { useRequest } from '@umijs/hooks';
 import useModel from 'flooks';
@@ -23,6 +25,7 @@ const counpon = {
 };
 
 const CounponItem = ({ info, isEnd }) => {
+  const { t } = useTranslation();
   const navigation = useNavigation();
   return (
     <Div mt={10} mx={5}>
@@ -37,12 +40,14 @@ const CounponItem = ({ info, isEnd }) => {
             </Text>
             {counpon.fullAmount > 0 && (
               <Text fontSize="xs" color="gray300" textAlign="left">
-                满{counpon.fullAmount}元可用
+                {t('man')}
+                {counpon.fullAmount}
+                {t('yuan-ke-yong')}
               </Text>
             )}
             {counpon.fullAmount === 0 && (
               <Text fontSize="xs" color="gray300" textAlign="left">
-                无金额门槛
+                {t('wu-jinemen-jian')}
               </Text>
             )}
           </Div>
@@ -55,16 +60,20 @@ const CounponItem = ({ info, isEnd }) => {
               {counpon.name}
             </Text>
             <Text fontSize="xs" color="gray300" textAlign="left">
-              限{counpon.startDate}至{counpon.endDate}使用
+              {t('xian')}
+              {counpon.startDate}
+              {t('zhi')}
+              {counpon.endDate}
+              {t('shi-yong')}
             </Text>
           </Div>
           {isEnd ? (
             <Text color="gray500" fontSize="sm" textAlign="left">
-              已过期
+              {t('yi-guo-qi')}
             </Text>
           ) : (
             <Text color="gray500" fontSize="sm" textAlign="left">
-              去使用
+              {t('qu-shi-yong')}
             </Text>
           )}
         </Div>
@@ -74,6 +83,7 @@ const CounponItem = ({ info, isEnd }) => {
 };
 
 export default function CouponScreen() {
+  const { t } = useTranslation();
   const {
     userCouponList,
     userCouponListHis,
@@ -86,7 +96,7 @@ export default function CouponScreen() {
 
   return (
     <>
-      <Header title="红包卡券" />
+      <Header title={t('hong-bao-ka-quan')} />
       <ScrollView>
         {userCouponList.map((item) => {
           return <CounponItem key={item.id} info={item} />;
@@ -94,7 +104,7 @@ export default function CouponScreen() {
 
         {userCouponList.length === 0 && userCouponListHis.length === 0 && (
           <Div p={10} alignItems="center">
-            <Text>暂无数据</Text>
+            <Text>{t('zan-wu-shu-ju')}</Text>
           </Div>
         )}
 

screens/userCoupon/OrderCouponScreen.jsx

@@ -6,6 +6,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 
 import { useNavigation } from '@react-navigation/native';
 import { useRequest } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
 import useModel from 'flooks';
 import userCoupon from './model'; // 优惠券模块
 
@@ -23,6 +24,7 @@ const counpon = {
 };
 
 const CounponItem = ({ info, isEnd, canUse, isChoose }) => {
+  const { t } = useTranslation();
   const navigation = useNavigation();
   return (
     <Div mt={10} mx={5}>
@@ -37,12 +39,14 @@ const CounponItem = ({ info, isEnd, canUse, isChoose }) => {
             </Text>
             {counpon.fullAmount > 0 && (
               <Text fontSize="xs" color="gray300" textAlign="left">
-                满{counpon.fullAmount}元可用
+                {t('man')}
+                {counpon.fullAmount}
+                {t('yuan-ke-yong')}
               </Text>
             )}
             {counpon.fullAmount === 0 && (
               <Text fontSize="xs" color="gray300" textAlign="left">
-                无金额门槛
+                {t('wu-jinemen-jian')}
               </Text>
             )}
           </Div>
@@ -55,7 +59,11 @@ const CounponItem = ({ info, isEnd, canUse, isChoose }) => {
               {counpon.name}
             </Text>
             <Text fontSize="xs" color="gray300" textAlign="left">
-              限{counpon.startDate}至{counpon.endDate}使用
+              {t('xian')}
+              {counpon.startDate}
+              {t('zhi')}
+              {counpon.endDate}
+              {t('shi-yong')}
             </Text>
           </Div>
           {canUse && (
@@ -67,8 +75,8 @@ const CounponItem = ({ info, isEnd, canUse, isChoose }) => {
           )}
         </Div>
         <Div pb={15}>
-          {isEnd && <Text mt={10}>优惠券已过期</Text>}
-          {!isEnd && !canUse && <Text mt={10}>店铺不可用</Text>}
+          {isEnd && <Text mt={10}>{t('you-hui-quan-yi-guo-qi')}</Text>}
+          {!isEnd && !canUse && <Text mt={10}>{t('dian-pu-bu-ke-yong')}</Text>}
         </Div>
       </TouchableRipple>
     </Div>
@@ -85,10 +93,11 @@ export default function OrderCouponScreen() {
 
   useRequest(init, {});
   useRequest(getBadList, {});
+  const { t } = useTranslation();
 
   return (
     <>
-      <Header title="选择优惠券" />
+      <Header title={t('xuan-ze-you-hui-quan')} />
       <ScrollView
         contentContainerStyle={{ flexGrow: 1, backgroundColor: '#eee' }}
       >
@@ -98,7 +107,7 @@ export default function OrderCouponScreen() {
 
         {userCouponList.length === 0 && (
           <Div p={10} alignItems="center">
-            <Text textAlign="center">无可用优惠券</Text>
+            <Text textAlign="center">{t('wu-ke-yong-you-hui-quan')}</Text>
           </Div>
         )}
 

screens/userCoupon/SettingCom.jsx

@@ -2,6 +2,7 @@ import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import { Div, Button, Text } from 'react-native-magnus';
 
+import { useTranslation } from 'react-i18next';
 import { useNavigation } from '@react-navigation/native';
 import { useRequest } from '@umijs/hooks';
 import useModel from 'flooks';
@@ -12,6 +13,7 @@ export default function SettingCom() {
   useRequest(init, {});
 
   const navigation = useNavigation();
+  const { t } = useTranslation();
 
   return (
     <Button
@@ -23,14 +25,14 @@ export default function SettingCom() {
     >
       <Div alignItems="center">
         <Text fontSize="xl" fontWeight="bold" textAlign="left">
-          红包卡券
+          {t('hong-bao-ka-quan')}
         </Text>
         <Div row mt={2}>
           <Text fontSize="sm" color="red500" textAlign="left">
             {userCouponList.length}
           </Text>
           <Text fontSize="sm" textAlign="left">
-            个未使用红包
+            {t('ge-wei-shi-yong-hong-bao')}
           </Text>
         </Div>
       </Div>