template_0205

2026-02-05 13:16:05 +08:00
commit d93e4d9c9f
197 changed files with 52810 additions and 0 deletions
--- a/RN_TEMPLATE/app/screens/LanguageScreen.tsx
+++ b/RN_TEMPLATE/app/screens/LanguageScreen.tsx
@@ -0,0 +1,108 @@
+import { FC, useCallback } from "react"
+import { TextStyle, View, ViewStyle } from "react-native"
+import i18n from "i18next"
+
+import { Icon } from "@/components/Icon"
+import { ListItem } from "@/components/ListItem"
+import { Screen } from "@/components/Screen"
+import { Text } from "@/components/Text"
+import { translate } from "@/i18n/translate"
+import { AppStackScreenProps } from "@/navigators/navigationTypes"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+import type { ThemedStyle } from "@/theme/types"
+import { s } from "@/utils/responsive"
+import { useHeader } from "@/utils/useHeader"
+
+// Available languages with their native names
+const LANGUAGES = [
+  { code: "en", name: "English", nativeName: "English" },
+  { code: "zh", name: "Chinese", nativeName: "中文" },
+  { code: "ja", name: "Japanese", nativeName: "日本語" },
+  { code: "ko", name: "Korean", nativeName: "한국어" },
+  { code: "es", name: "Spanish", nativeName: "Español" },
+  { code: "fr", name: "French", nativeName: "Français" },
+  { code: "ar", name: "Arabic", nativeName: "العربية" },
+  { code: "hi", name: "Hindi", nativeName: "हिन्दी" },
+]
+
+export const LanguageScreen: FC<AppStackScreenProps<"Language">> = function LanguageScreen({
+  navigation,
+}) {
+  const { themed, theme } = useAppTheme()
+
+  const currentLanguage = i18n.language?.split("-")[0] || "en"
+
+  const handleSelectLanguage = useCallback(
+    (langCode: string) => {
+      if (langCode !== currentLanguage) {
+        i18n.changeLanguage(langCode)
+      }
+      navigation.goBack()
+    },
+    [currentLanguage, navigation],
+  )
+
+  useHeader(
+    {
+      title: translate("languageScreen:title"),
+      leftIcon: "back",
+      onLeftPress: () => navigation.goBack(),
+    },
+    [],
+  )
+
+  return (
+    <Screen
+      preset="scroll"
+      safeAreaEdges={["bottom"]}
+      contentContainerStyle={[$styles.container, themed($container)]}
+    >
+      <Text size="xs" style={themed($hint)}>
+        {translate("languageScreen:selectHint")}
+      </Text>
+
+      <View style={themed($listContainer)}>
+        {LANGUAGES.map((lang) => {
+          const isSelected = currentLanguage === lang.code
+          return (
+            <ListItem
+              key={lang.code}
+              text={lang.nativeName}
+              textStyle={isSelected ? themed($selectedText) : undefined}
+              RightComponent={
+                isSelected ? <Icon icon="check" size={20} color={theme.colors.tint} /> : undefined
+              }
+              onPress={() => handleSelectLanguage(lang.code)}
+              style={themed($listItem)}
+            />
+          )
+        })}
+      </View>
+    </Screen>
+  )
+}
+
+const $container: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  paddingTop: spacing.md,
+})
+
+const $hint: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
+  color: colors.textDim,
+  marginBottom: spacing.md,
+})
+
+const $listContainer: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.palette.neutral200,
+  borderRadius: s(8),
+  overflow: "hidden",
+})
+
+const $listItem: ThemedStyle<ViewStyle> = () => ({
+  // Item styling handled by ListItem
+})
+
+const $selectedText: ThemedStyle<TextStyle> = ({ colors }) => ({
+  color: colors.tint,
+  fontWeight: "600",
+})