feat: add localization

Author: xianshenglu

App.tsx

@@ -5,7 +5,6 @@ import { DefaultTheme, Provider as PaperProvider } from "react-native-paper";
 import useCachedResources from "./hooks/useCachedResources";
 import useColorScheme from "./hooks/useColorScheme";
 import Navigation from "./navigation";
-
 const theme = {
   ...DefaultTheme,
   colors: {

lang/en-us.json

@@ -0,0 +1,32 @@
+{
+  "general": {
+    "start": "START",
+
+    "ip": "IP",
+    "lossRate": "Loss Rate",
+    "respondTime": "Respond Time",
+    "downloadSpeed": "Download Speed"
+  },
+  "testRun": {
+    "title": "Test Run",
+    "testRespond": "TEST RESPOND",
+    "testDownload": "TEST DOWNLOAD",
+    "ipCount": "ip count",
+    "coCurrentCount": "coCurrent count",
+    "testUrl": "test url"
+  },
+  "testStatistics": {
+    "title": "Test Statistics",
+    "totalRespond": "Total Respond",
+    "respondSuccessRate": "Respond Suc Rate",
+    "meanRespondTime": "Mean Respond Time",
+    "totalDownload": "Total Download",
+    "downloadSuccessRate": "Download Suc Rate",
+    "meanDownload": "Mean Download",
+    "showAllColumns": "Show All Columns",
+    "hideSomeColumns": "Hide Some Columns"
+  },
+  "testConfig": {
+    "title": "Test Config"
+  }
+}

lang/zh-cn.json

@@ -0,0 +1,32 @@
+{
+  "general": {
+    "start": "开始",
+
+    "ip": "IP",
+    "lossRate": "丢包率",
+    "respondTime": "响应时长",
+    "downloadSpeed": "下载速度"
+  },
+  "testRun": {
+    "title": "运行测试",
+    "testRespond": "测试响应",
+    "testDownload": "测试下载",
+    "ipCount": "IP 数量",
+    "coCurrentCount": "并发数",
+    "testUrl": "测试地址"
+  },
+  "testStatistics": {
+    "title": "测试统计",
+    "totalRespond": "响应次数",
+    "respondSuccessRate": "响应成功率",
+    "meanRespondTime": "平均响应时长",
+    "totalDownload": "下载次数",
+    "downloadSuccessRate": "下载成功率",
+    "meanDownload": "平均下载速度",
+    "showAllColumns": "展示所有列",
+    "hideSomeColumns": "隐藏某些列"
+  },
+  "testConfig": {
+    "title": "测试配置"
+  }
+}

localize/index.ts

@@ -0,0 +1,27 @@
+import I18n from "i18n-js";
+import * as RNLocalize from "react-native-localize";
+import cn from "../lang/zh-cn.json";
+import en from "../lang/en-us.json";
+
+// 获取手机本地国际化信息
+const locales = RNLocalize.getLocales();
+const systemLanguage = locales[0]?.languageCode; // 用户系统偏好语言
+console.log(locales, 12, systemLanguage);
+
+// 如果获取到了即使用，否则启用默认语言
+if (systemLanguage) {
+  I18n.locale = systemLanguage;
+} else {
+  I18n.locale = "en"; // 用户既没有设置，也没有获取到系统语言，默认加载英语语言资源
+}
+
+I18n.fallbacks = true;
+
+// 加载语言包
+I18n.translations = {
+  zh: cn,
+  cn,
+  en,
+};
+
+export { I18n };

navigation/index.tsx

@@ -23,6 +23,7 @@ import {
 } from "../types";
 import LinkingConfiguration from "./LinkingConfiguration";
 import TestStatisticsScreen from "@/screens/TestStatisticsScreen";
+import { I18n } from "@/localize";
 
 export default function Navigation({
   colorScheme,
@@ -85,7 +86,7 @@ function BottomTabNavigator() {
         name="TestRun"
         component={TestRunScreen}
         options={({ navigation }: RootTabScreenProps<"TestRun">) => ({
-          title: "Test Run",
+          title: I18n.t("testRun.title"),
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
           headerRight: () => (
             <Pressable
@@ -108,7 +109,7 @@ function BottomTabNavigator() {
         name="TestStatistics"
         component={TestStatisticsScreen}
         options={({ navigation }: RootTabScreenProps<"TestStatistics">) => ({
-          title: "Test Statistics",
+          title: I18n.t("testStatistics.title"),
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
           headerRight: () => (
             <Pressable
@@ -131,7 +132,7 @@ function BottomTabNavigator() {
         name="TestConfig"
         component={ConfigScreen}
         options={{
-          title: "Test Config",
+          title: I18n.t("testConfig.title"),
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
         }}
       />

package-lock.json

@@ -29,12 +29,14 @@
     "expo-splash-screen": "~0.14.0",
     "expo-status-bar": "~1.2.0",
     "expo-web-browser": "~10.1.0",
+    "i18n-js": "^3.9.2",
     "lodash-es": "^4.17.21",
     "mobx": "^6.5.0",
     "mobx-react": "^7.3.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
+    "react-native-localize": "^2.2.1",
     "react-native-paper": "^4.12.1",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.10.1",
@@ -44,6 +46,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
+    "@types/i18n-js": "^3.8.2",
     "@types/lodash-es": "^4.17.6",
     "@types/react": "~17.0.21",
     "@types/react-native": "~0.64.12",

package.json

@@ -1,11 +1,12 @@
 import { StyleSheet } from "react-native";
 
 import { Text, View } from "../components/Themed";
+import { I18n } from "@/localize";
 
 export default function TestConfigScreen() {
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Test Config</Text>
+      <Text style={styles.title}>{I18n.t("testConfig.title")}</Text>
       <View
         style={styles.separator}
         lightColor="#eee"

screens/TestConfigScreen.tsx

@@ -12,7 +12,7 @@ import { initialTestPageTableHeaderCols, MyTableHeaderColumn } from "../model";
 import { useTestRunningStatus } from "../hooks/useTestRunningStatus";
 import { miniStyle } from "@/theme";
 import { Button } from "react-native-paper";
-
+import { I18n } from "@/localize";
 export default function TestPage({ path }: { path: string }) {
   const { testIpCount, setTestIpCount, getIpList } = useTestIpCount();
   const [testIpCoCurrentCount, setTestIpCoCurrentCount] = useState<string>("5");
@@ -93,7 +93,7 @@ export default function TestPage({ path }: { path: string }) {
           contentStyle={{ ...styles.paperBtnContent }}
           labelStyle={{ ...miniStyle.textStyle }}
         >
-          TEST RESPOND
+          {I18n.t("testRun.testRespond")}
         </Button>
         <View style={{ marginRight: 5 }}></View>
         <Button
@@ -108,7 +108,7 @@ export default function TestPage({ path }: { path: string }) {
           contentStyle={{ ...styles.paperBtnContent }}
           labelStyle={{ ...miniStyle.textStyle }}
         >
-          TEST DOWNLOAD
+          {I18n.t("testRun.testDownload")}
         </Button>
         <View style={{ marginRight: 5 }}></View>
 
@@ -118,18 +118,18 @@ export default function TestPage({ path }: { path: string }) {
           contentStyle={{ ...styles.paperBtnContent }}
           labelStyle={{ ...miniStyle.textStyle }}
         >
-          START
+          {I18n.t("general.start")}
         </Button>
       </View>
       <View style={styles.toolbar}>
-        <Text>ip count</Text>
+        <Text> {I18n.t("testRun.ipCount")}</Text>
         <TextInput
           style={styles.input}
           onChangeText={onTestIpCountChange}
           value={testIpCount}
           keyboardType="numeric"
         />
-        <Text>coCurrent count</Text>
+        <Text> {I18n.t("testRun.coCurrentCount")}</Text>
         <TextInput
           style={styles.input}
           onChangeText={(val) => setTestIpCoCurrentCount(() => val)}
@@ -138,7 +138,7 @@ export default function TestPage({ path }: { path: string }) {
         />
       </View>
       <View style={styles.toolbar}>
-        <Text>test url</Text>
+        <Text>{I18n.t("testRun.testUrl")}</Text>
         <TextInput
           style={{ ...styles.input, flex: 1 }}
           onChangeText={(val) => setTestUrl(() => val)}

screens/TestRunScreen/components/TestPage.tsx

@@ -1,3 +1,4 @@
+import { I18n } from '@/localize';
 import { RequestStatus } from "@/typings/index";
 import { TableHeaderColumn } from "@/components/Table/TableHeader";
 export type CfIpResponse = {
@@ -14,10 +15,10 @@ export type MyTableHeaderColumn = TableHeaderColumn<
 >;
 
 export const initialTestPageTableHeaderCols: MyTableHeaderColumn[] = [
-  { id: "ip", label: "IP", width: 60, sort: "default" },
+  { id: "ip", label: I18n.t("general.ip"), width: 60, sort: "default" },
   {
     id: "packetLossRate",
-    label: "Loss Rate",
+    label: I18n.t("general.lossRate"),
     width: 40,
     sort: "default",
     // @ts-ignore
@@ -30,7 +31,7 @@ export const initialTestPageTableHeaderCols: MyTableHeaderColumn[] = [
   },
   {
     id: "respondTime",
-    label: "Respond Time(ms)",
+    label: I18n.t("general.respondTime"),
     width: 40,
     sort: "default",
     // @ts-ignore
@@ -54,7 +55,7 @@ export const initialTestPageTableHeaderCols: MyTableHeaderColumn[] = [
   },
   {
     id: "downloadSpeed",
-    label: "Download Speed(MB/S)",
+    label: I18n.t("general.downloadSpeed"),
     width: 40,
     sort: "default",
     // @ts-ignore