在全球化时代，多语言支持已成为移动应用的标配功能。本文将深入分析一个功能完备的 React Native 语言设置应用实现，探讨其架构设计、状态管理、用户体验以及跨端兼容性策略。

组件化

该实现采用了清晰的组件化架构，主要包含以下部分：

• 主应用组件 (LanguageApp) - 负责整体布局和状态管理
• 语言选项类型 (LanguageOption) - 定义语言选项的数据结构
• 渲染函数 (renderLanguageGroup) - 负责渲染语言分组
• 事件处理函数 (handleLanguageSelect) - 处理语言选择事件

这种架构设计使得代码结构清晰，易于维护和扩展。主应用组件负责管理全局状态和业务逻辑，而渲染函数负责具体的 UI 渲染，实现了关注点分离。

状态管理

LanguageApp 组件使用 useState 钩子管理两个关键状态：

const [selectedLanguage, setSelectedLanguage] = useState<string>('zh');
const [recentLanguages, setRecentLanguages] = useState<string[]>(['en', 'ja', 'ko']);

这种状态管理方式简洁高效，通过状态更新触发组件重新渲染，实现了语言选择和切换功能。初始状态设置为中文，符合中国用户的使用习惯。

---

类型定义

该实现使用 TypeScript 定义了核心数据类型：

type LanguageOption = {
  id: string;
  code: string;
  name: string;
  nativeName: string;
  flag: string;
  icon: string;
};

这个类型定义包含了语言的完整信息，包括：

• id - 唯一标识符
• code - 语言代码（如 ‘zh’, ‘en’）
• name - 语言名称（中文显示）
• nativeName - 语言的本地名称（如 ‘English’, ‘日本語’）
• flag - 语言对应国家/地区的国旗（使用 Unicode 表情符号）
• icon - 语言图标

这种类型定义使得数据结构更加清晰，提高了代码的可读性和可维护性，同时也提供了类型安全保障。

数据组织

应用数据按照功能和使用频率进行组织：

• languages - 完整的语言选项数组
• languageGroups - 语言分组，分为"常用语言"和"其他语言"
• recentLanguages - 最近使用的语言，方便用户快速切换

这种数据组织方式使得用户界面更加清晰，用户可以快速找到并选择所需的语言。

---

布局结构

应用界面采用了清晰的层次结构：

• 头部 - 显示页面标题和帮助按钮
• 当前语言卡片 - 显示当前选择的语言
• 快速切换区域 - 显示常用语言的快速切换按钮
• 语言分组区域 - 按分组显示所有可用语言

这种布局结构符合用户的使用习惯，用户可以快速了解当前语言设置并进行切换。

交互设计

应用实现了直观的交互设计：

• 语言选择 - 点击语言选项即可切换语言
• 视觉反馈 - 选中的语言会有明显的视觉标记（背景色变化和勾选图标）
• 快速切换 - 提供常用语言的快速切换按钮
• 确认提示 - 语言切换后显示确认提示

这些交互设计元素共同构成了良好的用户体验，使得语言切换操作简单直观。

---

当前实现使用 ScrollView 渲染所有语言选项，可以考虑使用 FlatList 提高性能：

// 优化前
<ScrollView style={styles.content}>
  {/* 内容 */}
</ScrollView>

// 优化后
<FlatList
  data={languageGroups}
  renderItem={renderLanguageGroup}
  keyExtractor={(item, index) => `group-${index}`}
  ListHeaderComponent={
    <>
      {/* 当前语言卡片 */}
      <View style={styles.currentLangCard}>
        {/* 内容 */}
      </View>
      
      {/* 快速切换语言 */}
      <Text style={styles.sectionTitle}>快速切换</Text>
      <View style={styles.quickSwitchContainer}>
        {/* 快速切换按钮 */}
      </View>
    </>
  }
  style={styles.content}
/>

2. 状态管理

当前实现使用 useState 管理状态，可以考虑使用 useReducer 或状态管理库来管理复杂状态：

// 优化前
const [selectedLanguage, setSelectedLanguage] = useState<string>('zh');
const [recentLanguages, setRecentLanguages] = useState<string[]>(['en', 'ja', 'ko']);

// 优化后
const initialState = {
  selectedLanguage: 'zh',
  recentLanguages: ['en', 'ja', 'ko']
};

type Action = 
  | { type: 'SELECT_LANGUAGE'; payload: string }
  | { type: 'ADD_RECENT_LANGUAGE'; payload: string };

const languageReducer = (state: typeof initialState, action: Action) => {
  switch (action.type) {
    case 'SELECT_LANGUAGE':
      return {
        ...state,
        selectedLanguage: action.payload
      };
    case 'ADD_RECENT_LANGUAGE':
      const newRecentLanguages = [action.payload, ...state.recentLanguages.filter(lang => lang !== action.payload)].slice(0, 3);
      return {
        ...state,
        recentLanguages: newRecentLanguages
      };
    default:
      return state;
  }
};

const [state, dispatch] = useReducer(languageReducer, initialState);

3. 国际化

当前实现为语言设置提供了基础架构，可以考虑集成国际化库：

import i18n from 'i18n-js';

// 配置国际化
const translations = {
  en: {
    languageSettings: 'Language Settings',
    currentLanguage: 'Current Language',
    quickSwitch: 'Quick Switch',
    commonLanguages: 'Common Languages',
    otherLanguages: 'Other Languages'
  },
  zh: {
    languageSettings: '语言设置',
    currentLanguage: '当前语言',
    quickSwitch: '快速切换',
    commonLanguages: '常用语言',
    otherLanguages: '其他语言'
  }
  // 其他语言...
};

i18n.translations = translations;
i18n.locale = selectedLanguage;

// 使用国际化
<Text style={styles.title}>{i18n.t('languageSettings')}</Text>

4. 动画

可以为语言切换添加动画效果，提升用户体验：

import { Animated } from 'react-native';

const LanguageApp = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  
  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true
    }).start();
  }, [selectedLanguage]);
  
  return (
    <SafeAreaView style={styles.container}>
      {/* 其他内容 */}
      <Animated.View style={[styles.currentLangCard, { opacity: fadeAnim }]}>
        {/* 当前语言卡片内容 */}
      </Animated.View>
      {/* 其他内容 */}
    </SafeAreaView>
  );
};

本文深入分析了一个功能完备的 React Native 语言设置应用实现，从架构设计、状态管理、数据结构到跨端兼容性都进行了详细探讨。该实现不仅功能完整，而且代码结构清晰，具有良好的可扩展性和可维护性。

---

希望深入理解这个基于 React Native 开发的多语言设置应用的核心技术实现逻辑，同时掌握将其适配到鸿蒙（HarmonyOS）平台的关键要点。该应用是典型的移动端设置类应用，融合了分类数据展示、状态驱动的UI交互、响应式布局、多维度列表渲染等特性，是从 React Native 向鸿蒙跨端迁移的经典场景案例。

该多语言设置应用的核心价值在于结构化的语言数据管理与状态驱动的交互体验，同时兼顾了移动端设置类应用的视觉规范和操作逻辑，完全符合现代移动端应用开发的最佳实践。

1. 类型系统

应用采用 TypeScript 强类型设计，构建了清晰的多语言数据模型体系，为跨端适配奠定了坚实基础：

• 核心类型定义：

  type LanguageOption = {
    id: string;
    code: string; // 语言编码（zh/en/ja等）
    name: string; // 中文名称
    nativeName: string; // 原生名称
    flag: string; // 国旗emoji
    icon: string; // 图标标识
  };
  

• 数据模型设计亮点：
  • 分层级的数据结构：languageGroups 将语言分为「常用语言」和「其他语言」，符合用户查找习惯；
  • 多维度标识：同时包含 code（机器识别）、name（中文展示）、nativeName（原生展示），满足不同场景的展示需求；
  • 可视化标识：flag 字段使用 emoji 作为视觉标识，替代图片资源，减少包体积，提升加载性能；
• 类型设计价值：
  • 强类型约束避免了运行时数据错误，如 handleLanguageSelect 中通过 langCode 精准匹配语言信息；
  • 标准化的数据结构使跨端迁移时数据层可 100% 复用，仅需适配视图层渲染逻辑。

2. 状态管理

应用采用 React Hooks 实现轻量级状态管理，聚焦核心交互场景，实现流畅的用户体验：

• 核心状态设计：

  // 当前选中的语言编码
  const [selectedLanguage, setSelectedLanguage] = useState<string>('zh');
  // 最近使用的语言编码列表
  const [recentLanguages, setRecentLanguages] = useState<string[]>(['en', 'ja', 'ko']);
  

• 核心交互逻辑：

  const handleLanguageSelect = (langCode: string) => {
    setSelectedLanguage(langCode);
    Alert.alert('语言切换', `已切换到 ${languages.find(l => l.code === langCode)?.nativeName}`, [
      { text: '确定', onPress: () => console.log(`语言已切换为: ${langCode}`) }
    ]);
  };
  

• 交互设计亮点：
  • 状态驱动的UI更新：selectedLanguage 作为单一数据源，驱动所有语言选择相关的UI状态（选中样式、当前语言展示等）；
  • 精准的数据匹配：通过 langCode 作为唯一标识，使用 find 方法精准获取语言信息，避免索引依赖；
  • 反馈式交互：语言切换后通过 Alert.alert 给出明确的用户反馈，符合移动端交互规范；
  • 不可变状态更新：直接通过 setSelectedLanguage 更新状态，无冗余的状态计算，保证逻辑简洁。

3. 列表渲染

应用实现了多种移动端列表渲染形式，是设置类应用的典型范式：

• 分组列表渲染：

  <FlatList
    data={languageGroups}
    keyExtractor={(item, index) => `group-${index}`}
    renderItem={renderLanguageGroup}
    showsVerticalScrollIndicator={false}
  />
  

  • 分组渲染逻辑：renderLanguageGroup 先渲染分组标题，再通过 map 渲染组内语言项，实现结构化展示；
  • 性能优化：showsVerticalScrollIndicator={false} 隐藏滚动指示器，提升视觉体验；
  • 唯一标识：使用 group-${index} 作为 key，保证列表项的唯一性；
• 响应式布局实现：
  • 快速切换区域：flexDirection: 'row' + flexWrap: 'wrap' 实现自动换行的流式布局，适配不同屏幕宽度；
  • 等分布局：底部导航使用 flex: 1 实现4个导航项均分宽度，适配不同屏幕尺寸；
  • 安全区域：SafeAreaView 保证内容不被刘海屏/底部导航栏遮挡；
  • 尺寸适配：通过 Dimensions.get('window') 获取屏幕宽高，为后续响应式布局预留扩展空间；
• 视觉层级设计：
  • 卡片化设计：所有核心内容区域使用 backgroundColor: '#ffffff' + borderRadius: 12 + shadow 实现卡片化，提升视觉层次感；
  • 选中状态差异化：
    • 语言项选中时：背景色变为 #dbeafe，添加 #3b82f6 边框，文字颜色变为主题色；
    • 快速切换项选中时：背景色变为主题色 #3b82f6，文字/图标变为白色；
  • 信息分层：国旗 → 语言名称 → 原生名称 → 选中标识，视觉层级清晰，符合用户阅读习惯。

4. 样式

应用的样式系统遵循移动端设置类应用的设计规范，注重视觉一致性和可维护性：

• 样式模块化：
  • 按功能模块划分样式：currentLangCard（当前语言卡片）、quickSwitchContainer（快速切换容器）、languageItem（语言项）等；
  • 状态相关样式：selectedLanguageItem、selectedQuickSwitchItem 等，通过条件渲染应用不同样式；
• 视觉规范体系：
  • 色彩系统：主色（#3b82f6）、背景色（#f8fafc）、卡片色（#ffffff）、文本色（#1e293b/#64748b/#94a3b8）形成完整的视觉体系；
  • 间距规范：内边距以16px/20px为主，外边距以8px/12px/20px为主，保证布局呼吸感；
  • 圆角规范：卡片使用12px圆角，按钮/小控件使用20px圆角，形成统一的圆角层级；
  • 阴影系统：统一的 elevation（Android）+ shadow（iOS）配置，保证跨平台阴影效果一致；
• 文本样式层级：
  • 标题：18px 粗体（#1e293b）；
  • 子标题：16px 半粗体（#475569）；
  • 正文：14px（#64748b）；
  • 辅助文本：12px（#94a3b8）；
  • 形成清晰的文本层级，提升可读性。

---

鸿蒙端采用 ArkTS 语言 + ArkUI 组件库，与 React Native 的核心 API 映射关系如下：

React Native 核心API	鸿蒙 ArkTS 对应实现	适配关键说明
useState	@State	状态声明语法替换，逻辑一致
SafeAreaView	SafeArea 组件 + safeArea(true)	安全区域适配
View	Column/Row/Stack	基础布局组件替换
Text	Text 组件	属性基本兼容，样式语法调整
TouchableOpacity	Button + stateEffect(false)	可点击组件替换，去除默认效果
ScrollView	Scroll 组件	滚动容器替换
FlatList	List + ForEach	列表渲染适配
StyleSheet.create	@Styles/@Extend + 内联样式	样式体系重构
Alert.alert	AlertDialog	弹窗交互替换
Dimensions.get('window')	viewportWidth/viewportHeight	屏幕尺寸获取
条件渲染（&&）	if 语句	条件渲染语法适配
数组 map/find	ForEach + 查找函数	数组操作适配

2. 鸿蒙端

// index.ets - 鸿蒙端入口文件
@Entry
@Component
struct LanguageApp {
  // 核心状态 - 对应 React Native 的 useState
  @State selectedLanguage: string = 'zh';
  @State recentLanguages: string[] = ['en', 'ja', 'ko'];
  
  // 屏幕尺寸 - 对应 React Native 的 Dimensions
  private screenWidth: number = viewportWidth;
  private screenHeight: number = viewportHeight;

  // 语言选项类型（复用 TypeScript 类型定义）
  type LanguageOption = {
    id: string;
    code: string;
    name: string;
    nativeName: string;
    flag: string;
    icon: string;
  };

  // 初始化语言数据（完全复用 React Native 数据）
  private languages: LanguageOption[] = [
    { id: '1', code: 'zh', name: '中文', nativeName: '简体中文', flag: '🇨🇳', icon: '🇨🇳' },
    { id: '2', code: 'en', name: '英语', nativeName: 'English', flag: '🇬🇧', icon: '🇬🇧' },
    { id: '3', code: 'ja', name: '日语', nativeName: '日本語', flag: '🇯🇵', icon: '🇯🇵' },
    { id: '4', code: 'ko', name: '韩语', nativeName: '한국어', flag: '🇰🇷', icon: '🇰🇷' },
    { id: '5', code: 'fr', name: '法语', nativeName: 'Français', flag: '🇫🇷', icon: '🇫🇷' },
    { id: '6', code: 'es', name: '西班牙语', nativeName: 'Español', flag: '🇪🇸', icon: '🇪🇸' },
    { id: '7', code: 'de', name: '德语', nativeName: 'Deutsch', flag: '🇩🇪', icon: '🇩🇪' },
    { id: '8', code: 'ru', name: '俄语', nativeName: 'Русский', flag: '🇷🇺', icon: '🇷🇺' },
    { id: '9', code: 'ar', name: '阿拉伯语', nativeName: 'العربية', flag: '🇸🇦', icon: '🇸🇦' },
    { id: '10', code: 'pt', name: '葡萄牙语', nativeName: 'Português', flag: '🇵🇹', icon: '🇵🇹' },
  ];

  // 语言分组（完全复用 React Native 逻辑）
  private languageGroups = [
    { title: '常用语言', items: this.languages.slice(0, 4) },
    { title: '其他语言', items: this.languages.slice(4) },
  ];

  // 通用样式封装 - 替代 React Native 的 StyleSheet
  @Styles
  cardShadow() {
    .shadow({ radius: 2, color: '#000', opacity: 0.1, offsetX: 0, offsetY: 1 });
  }

  // 语言选择处理函数（复用 React Native 逻辑）
  private handleLanguageSelect(langCode: string) {
    this.selectedLanguage = langCode;
    const lang = this.languages.find(l => l.code === langCode);
    
    // 鸿蒙弹窗 - 替代 React Native 的 Alert.alert
    AlertDialog.show({
      title: '语言切换',
      message: `已切换到 ${lang?.nativeName}`,
      confirm: {
        value: '确定',
        action: () => {
          console.log(`语言已切换为: ${langCode}`);
        }
      }
    });
  }

  build() {
    Column({ space: 0 }) {
      // 头部组件
      this.Header();
      
      // 内容区域
      this.ContentArea();
      
      // 底部导航
      this.BottomNav();
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f8fafc')
    .safeArea(true); // 对应 React Native 的 SafeAreaView
  }
}

---

（1）头部与底部导航

// 鸿蒙端头部组件
@Builder
Header() {
  Row() {
    Text('语言设置')
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .fontColor('#1e293b');
    
    // 帮助按钮 - 替代 React Native 的 TouchableOpacity
    Button('❓')
      .fontSize(20)
      .fontColor('#64748b')
      .backgroundColor(Color.Transparent)
      .stateEffect(false) // 去除默认点击效果
      .onClick(() => {
        AlertDialog.show({
          title: '帮助',
          message: '语言切换帮助',
          confirm: { value: '确定' }
        });
      });
  }
  .justifyContent(FlexAlign.SpaceBetween)
  .alignItems(Alignment.Center)
  .padding(20)
  .backgroundColor('#ffffff')
  .borderBottom({ width: 1, color: '#e2e8f0' })
  .width('100%');
}

// 鸿蒙端底部导航
@Builder
BottomNav() {
  Row({ space: 0 }) {
    // 课程
    this.NavItem('📚', '课程');
    // 搜索
    this.NavItem('🔍', '搜索');
    // 语言
    this.NavItem('🌐', '语言');
    // 我的
    this.NavItem('👤', '我的');
  }
  .backgroundColor('#ffffff')
  .borderTop({ width: 1, color: '#e2e8f0' })
  .paddingVertical(12)
  .justifyContent(FlexAlign.SpaceAround)
  .width('100%');
}

// 通用导航项
@Builder
NavItem(icon: string, text: string) {
  Button() {
    Column({ space: 4 }) {
      Text(icon)
        .fontSize(20)
        .fontColor('#94a3b8');
      Text(text)
        .fontSize(12)
        .fontColor('#94a3b8');
    }
  }
  .backgroundColor(Color.Transparent)
  .flex(1)
  .stateEffect(false);
}

（2）内容区域

// 鸿蒙端内容区域
@Builder
ContentArea() {
  Scroll() {
    Column({ space: 16 }) {
      // 当前语言卡片
      this.CurrentLangCard();
      
      // 快速切换语言
      this.QuickSwitchArea();
      
      // 最近使用的语言
      this.RecentLanguagesArea();
      
      // 选择语言列表
      this.LanguageListArea();
      
      // 语言设置说明
      this.InfoCard();
    }
    .padding(16)
    .width('100%');
  }
  .flex(1)
  .width('100%');
}

// 当前语言卡片
@Builder
CurrentLangCard() {
  // 查找当前选中的语言信息
  const currentLang = this.languages.find(l => l.code === this.selectedLanguage);
  
  Column({ space: 4 }) {
    Text('当前语言')
      .fontSize(14)
      .fontColor('#64748b');
    
    Text(currentLang?.nativeName || '简体中文')
      .fontSize(24)
      .fontWeight(FontWeight.Bold)
      .fontColor('#1e293b');
    
    Text(this.selectedLanguage.toUpperCase())
      .fontSize(12)
      .fontColor('#94a3b8');
  }
  .backgroundColor('#ffffff')
  .borderRadius(12)
  .padding(20)
  .cardShadow() // 应用通用阴影样式
  .width('100%')
  .marginBottom(20);
}

// 快速切换语言区域
@Builder
QuickSwitchArea() {
  Column({ space: 12 }) {
    Text('快速切换')
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .fontColor('#1e293b')
      .width('100%');
    
    // 流式布局容器 - 对应 React Native 的 flexWrap: 'wrap'
    Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.FlexStart, gap: 8 }) {
      ForEach(this.languages.slice(0, 5), (lang) => {
        // 快速切换项
        Button() {
          Column({ space: 4 }) {
            Text(lang.flag)
              .fontSize(20)
              .fontColor(this.selectedLanguage === lang.code ? '#ffffff' : Color.Black)
              .textAlign(TextAlign.Center);
            
            Text(lang.name)
              .fontSize(12)
              .fontColor(this.selectedLanguage === lang.code ? '#ffffff' : '#64748b')
              .fontWeight(this.selectedLanguage === lang.code ? FontWeight.Medium : FontWeight.Normal)
              .textAlign(TextAlign.Center);
          }
        }
        .backgroundColor(this.selectedLanguage === lang.code ? '#3b82f6' : '#f1f5f9')
        .borderRadius(20)
        .padding({ top: 10, bottom: 10, left: 16, right: 16 })
        .margin({ right: 8, bottom: 8 })
        .stateEffect(false)
        .onClick(() => {
          this.handleLanguageSelect(lang.code);
        });
      });
    }
    .width('100%')
    .marginBottom(20);
  }
}

// 最近使用的语言区域
@Builder
RecentLanguagesArea() {
  Column({ space: 12 }) {
    Text('最近使用')
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .fontColor('#1e293b')
      .width('100%');
    
    // 流式布局容器
    Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.FlexStart, gap: 8 }) {
      ForEach(this.recentLanguages, (code) => {
        const lang = this.languages.find(l => l.code === code);
        if (!lang) return;
        
        Button() {
          Row({ space: 8 }) {
            Text(lang.flag)
              .fontSize(18);
            
            Text(lang.name)
              .fontSize(14)
              .fontColor('#1e293b');
          }
        }
        .backgroundColor('#ffffff')
        .borderRadius(20)
        .padding({ top: 8, bottom: 8, left: 16, right: 16 })
        .margin({ right: 8, bottom: 8 })
        .cardShadow()
        .stateEffect(false)
        .onClick(() => {
          this.handleLanguageSelect(code);
        });
      });
    }
    .width('100%')
    .marginBottom(20);
  }
}

// 语言列表区域
@Builder
LanguageListArea() {
  Column({ space: 12 }) {
    Text('选择语言')
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .fontColor('#1e293b')
      .width('100%');
    
    // 语言分组列表 - 对应 React Native 的 FlatList
    List() {
      ForEach(this.languageGroups, (group) => {
        ListItemGroup({ header: Text(group.title).fontSize(16).fontWeight(FontWeight.SemiBold).fontColor('#475569') }) {
          ForEach(group.items, (lang) => {
            ListItem() {
              // 语言项
              Button() {
                Row({ space: 16 }) {
                  // 国旗容器
                  Column()
                    .width(40)
                    .height(40)
                    .borderRadius(20)
                    .backgroundColor('#f1f5f9')
                    .justifyContent(FlexAlign.Center)
                    .alignItems(Alignment.Center)
                    .overlay(Text(lang.flag).fontSize(24));
                  
                  // 语言信息
                  Column({ space: 4 })
                    .flex(1)
                    .overlay(
                      Column({ space: 4 }) {
                        Text(lang.name)
                          .fontSize(16)
                          .fontWeight(this.selectedLanguage === lang.code ? FontWeight.Bold : FontWeight.Medium)
                          .fontColor(this.selectedLanguage === lang.code ? '#3b82f6' : '#1e293b');
                        
                        Text(lang.nativeName)
                          .fontSize(14)
                          .fontColor('#64748b');
                      }
                    );
                  
                  // 选中标识
                  if (this.selectedLanguage === lang.code) {
                    Text('✓')
                      .fontSize(20)
                      .fontColor('#3b82f6')
                      .fontWeight(FontWeight.Bold);
                  }
                }
              }
              .backgroundColor(this.selectedLanguage === lang.code ? '#dbeafe' : '#ffffff')
              .border({ 
                width: this.selectedLanguage === lang.code ? 2 : 0,
                color: '#3b82f6'
              })
              .borderRadius(12)
              .padding(16)
              .marginBottom(8)
              .cardShadow()
              .stateEffect(false)
              .width('100%')
              .onClick(() => {
                this.handleLanguageSelect(lang.code);
              });
            }
          });
        }
      });
    }
    .width('100%')
    .marginBottom(20)
    .scrollBar(BarState.Off); // 隐藏滚动条 - 对应 showsVerticalScrollIndicator={false}
  }
}

// 语言设置说明卡片
@Builder
InfoCard() {
  Column({ space: 8 }) {
    Text('语言设置说明')
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .fontColor('#1e293b')
      .marginBottom(12);
    
    Text('• 切换语言后，应用界面将立即更新')
      .fontSize(14)
      .fontColor('#64748b')
      .lineHeight(22);
    
    Text('• 部分内容可能需要重新加载')
      .fontSize(14)
      .fontColor('#64748b')
      .lineHeight(22);
    
    Text('• 您的偏好设置将被保存')
      .fontSize(14)
      .fontColor('#64748b')
      .lineHeight(22);
    
    Text('• 如需更多语言，请反馈给我们')
      .fontSize(14)
      .fontColor('#64748b')
      .lineHeight(22);
  }
  .backgroundColor('#ffffff')
  .borderRadius(12)
  .padding(16)
  .cardShadow()
  .width('100%')
  .marginTop(10);
}

---

（1）状态管理

React Native 的 useState 转换为鸿蒙的 @State，核心逻辑完全复用：

// React Native
const [selectedLanguage, setSelectedLanguage] = useState<string>('zh');
const [recentLanguages, setRecentLanguages] = useState<string[]>(['en', 'ja', 'ko']);

// 鸿蒙
@State selectedLanguage: string = 'zh';
@State recentLanguages: string[] = ['en', 'ja', 'ko'];

（2）流式布局

React Native 的 flexWrap: 'wrap' 转换为鸿蒙的 Flex({ wrap: FlexWrap.Wrap })：

// React Native
<View style={styles.quickSwitchContainer}>
  {languages.slice(0, 5).map(lang => (...))}
</View>

// 鸿蒙
Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.FlexStart, gap: 8 }) {
  ForEach(this.languages.slice(0, 5), (lang) => (...));
}

（3）列表分组

React Native 的 FlatList + 分组渲染转换为鸿蒙的 List + ListItemGroup：

// React Native
<FlatList
  data={languageGroups}
  renderItem={renderLanguageGroup}
/>

// 鸿蒙
List() {
  ForEach(this.languageGroups, (group) => {
    ListItemGroup({ header: Text(group.title) }) {
      ForEach(group.items, (lang) => {
        ListItem() {
          // 语言项渲染
        }
      });
    }
  });
}

（4）选中状态

React Native 的条件样式转换为鸿蒙的三元表达式样式：

// React Native
<View style={[styles.languageItem, selectedLanguage === lang.code && styles.selectedLanguageItem]}>
  <Text style={[styles.languageName, selectedLanguage === lang.code && styles.selectedLanguageText]}>
    {lang.name}
  </Text>
</View>

// 鸿蒙
Button() {
  // 内容
}
.backgroundColor(this.selectedLanguage === lang.code ? '#dbeafe' : '#ffffff')
.border({ 
  width: this.selectedLanguage === lang.code ? 2 : 0,
  color: '#3b82f6'
});

（5）弹窗交互

React Native 的 Alert.alert 转换为鸿蒙的 AlertDialog.show：

// React Native
Alert.alert('语言切换', `已切换到 ${lang.nativeName}`, [
  { text: '确定', onPress: () => console.log(`语言已切换为: ${langCode}`) }
]);

// 鸿蒙
AlertDialog.show({
  title: '语言切换',
  message: `已切换到 ${lang?.nativeName}`,
  confirm: {
    value: '确定',
    action: () => {
      console.log(`语言已切换为: ${langCode}`);
    }
  }
});

---

真实演示案例代码：

// app.tsx
import React, { useState } from 'react';
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, ScrollView, Dimensions, Alert, FlatList } from 'react-native';

// Base64 图标库
const ICONS_BASE64 = {
  chinese: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  english: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  japanese: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  korean: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  french: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  spanish: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  german: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  settings: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
};

const { width, height } = Dimensions.get('window');

// 语言选项类型
type LanguageOption = {
  id: string;
  code: string;
  name: string;
  nativeName: string;
  flag: string;
  icon: string;
};

const LanguageApp = () => {
  const [selectedLanguage, setSelectedLanguage] = useState<string>('zh');
  const [recentLanguages, setRecentLanguages] = useState<string[]>(['en', 'ja', 'ko']);
  
  const languages: LanguageOption[] = [
    { id: '1', code: 'zh', name: '中文', nativeName: '简体中文', flag: '🇨🇳', icon: '🇨🇳' },
    { id: '2', code: 'en', name: '英语', nativeName: 'English', flag: '🇬🇧', icon: '🇬🇧' },
    { id: '3', code: 'ja', name: '日语', nativeName: '日本語', flag: '🇯🇵', icon: '🇯🇵' },
    { id: '4', code: 'ko', name: '韩语', nativeName: '한국어', flag: '🇰🇷', icon: '🇰🇷' },
    { id: '5', code: 'fr', name: '法语', nativeName: 'Français', flag: '🇫🇷', icon: '🇫🇷' },
    { id: '6', code: 'es', name: '西班牙语', nativeName: 'Español', flag: '🇪🇸', icon: '🇪🇸' },
    { id: '7', code: 'de', name: '德语', nativeName: 'Deutsch', flag: '🇩🇪', icon: '🇩🇪' },
    { id: '8', code: 'ru', name: '俄语', nativeName: 'Русский', flag: '🇷🇺', icon: '🇷🇺' },
    { id: '9', code: 'ar', name: '阿拉伯语', nativeName: 'العربية', flag: '🇸🇦', icon: '🇸🇦' },
    { id: '10', code: 'pt', name: '葡萄牙语', nativeName: 'Português', flag: '🇵🇹', icon: '🇵🇹' },
  ];
  
  const languageGroups = [
    { title: '常用语言', items: languages.slice(0, 4) },
    { title: '其他语言', items: languages.slice(4) },
  ];

  const handleLanguageSelect = (langCode: string) => {
    setSelectedLanguage(langCode);
    Alert.alert('语言切换', `已切换到 ${languages.find(l => l.code === langCode)?.nativeName}`, [
      { text: '确定', onPress: () => console.log(`语言已切换为: ${langCode}`) }
    ]);
  };

  const renderLanguageGroup = ({ item }: { item: { title: string; items: LanguageOption[] } }) => (
    <View style={styles.languageGroup}>
      <Text style={styles.groupTitle}>{item.title}</Text>
      {item.items.map(lang => (
        <TouchableOpacity
          key={lang.id}
          style={[styles.languageItem, selectedLanguage === lang.code && styles.selectedLanguageItem]}
          onPress={() => handleLanguageSelect(lang.code)}
        >
          <View style={styles.languageFlag}>
            <Text style={styles.flagIcon}>{lang.flag}</Text>
          </View>
          <View style={styles.languageInfo}>
            <Text style={[styles.languageName, selectedLanguage === lang.code && styles.selectedLanguageText]}>
              {lang.name}
            </Text>
            <Text style={styles.languageNativeName}>{lang.nativeName}</Text>
          </View>
          {selectedLanguage === lang.code && (
            <Text style={styles.checkIcon}>✓</Text>
          )}
        </TouchableOpacity>
      ))}
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <Text style={styles.title}>语言设置</Text>
        <TouchableOpacity onPress={() => Alert.alert('帮助', '语言切换帮助')}>
          <Text style={styles.headerIcon}>❓</Text>
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.content}>
        {/* 当前语言卡片 */}
        <View style={styles.currentLangCard}>
          <Text style={styles.currentLangTitle}>当前语言</Text>
          <Text style={styles.currentLangValue}>
            {languages.find(l => l.code === selectedLanguage)?.nativeName || '简体中文'}
          </Text>
          <Text style={styles.currentLangCode}>
            {selectedLanguage.toUpperCase()}
          </Text>
        </View>

        {/* 快速切换语言 */}
        <Text style={styles.sectionTitle}>快速切换</Text>
        <View style={styles.quickSwitchContainer}>
          {languages.slice(0, 5).map(lang => (
            <TouchableOpacity
              key={`quick-${lang.id}`}
              style={[
                styles.quickSwitchItem,
                selectedLanguage === lang.code && styles.selectedQuickSwitchItem
              ]}
              onPress={() => handleLanguageSelect(lang.code)}
            >
              <Text style={[
                styles.quickSwitchIcon,
                selectedLanguage === lang.code && styles.selectedQuickSwitchIcon
              ]}>
                {lang.flag}
              </Text>
              <Text style={[
                styles.quickSwitchText,
                selectedLanguage === lang.code && styles.selectedQuickSwitchText
              ]}>
                {lang.name}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        {/* 最近使用的语言 */}
        <Text style={styles.sectionTitle}>最近使用</Text>
        <View style={styles.recentLangContainer}>
          {recentLanguages.map(code => {
            const lang = languages.find(l => l.code === code);
            if (!lang) return null;
            return (
              <TouchableOpacity
                key={`recent-${lang.id}`}
                style={styles.recentLangItem}
                onPress={() => handleLanguageSelect(code)}
              >
                <Text style={styles.recentLangFlag}>{lang.flag}</Text>
                <Text style={styles.recentLangName}>{lang.name}</Text>
              </TouchableOpacity>
            );
          })}
        </View>

        {/* 语言列表 */}
        <Text style={styles.sectionTitle}>选择语言</Text>
        <FlatList
          data={languageGroups}
          keyExtractor={(item, index) => `group-${index}`}
          renderItem={renderLanguageGroup}
          showsVerticalScrollIndicator={false}
        />

        {/* 语言设置说明 */}
        <View style={styles.infoCard}>
          <Text style={styles.infoTitle}>语言设置说明</Text>
          <Text style={styles.infoText}>• 切换语言后，应用界面将立即更新</Text>
          <Text style={styles.infoText}>• 部分内容可能需要重新加载</Text>
          <Text style={styles.infoText}>• 您的偏好设置将被保存</Text>
          <Text style={styles.infoText}>• 如需更多语言，请反馈给我们</Text>
        </View>
      </ScrollView>

      {/* 底部导航 */}
      <View style={styles.bottomNav}>
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>📚</Text>
          <Text style={styles.navText}>课程</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>🔍</Text>
          <Text style={styles.navText}>搜索</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>🌐</Text>
          <Text style={styles.navText}>语言</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>👤</Text>
          <Text style={styles.navText}>我的</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 20,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#1e293b',
  },
  headerIcon: {
    fontSize: 20,
    color: '#64748b',
  },
  content: {
    flex: 1,
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#1e293b',
    marginVertical: 12,
  },
  currentLangCard: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 20,
    marginBottom: 20,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  currentLangTitle: {
    fontSize: 14,
    color: '#64748b',
    marginBottom: 4,
  },
  currentLangValue: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1e293b',
    marginBottom: 4,
  },
  currentLangCode: {
    fontSize: 12,
    color: '#94a3b8',
  },
  quickSwitchContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 20,
  },
  quickSwitchItem: {
    backgroundColor: '#f1f5f9',
    borderRadius: 20,
    paddingVertical: 10,
    paddingHorizontal: 16,
    marginRight: 8,
    marginBottom: 8,
  },
  selectedQuickSwitchItem: {
    backgroundColor: '#3b82f6',
  },
  quickSwitchIcon: {
    fontSize: 20,
    textAlign: 'center',
    marginBottom: 4,
  },
  selectedQuickSwitchIcon: {
    color: '#ffffff',
  },
  quickSwitchText: {
    fontSize: 12,
    color: '#64748b',
    textAlign: 'center',
  },
  selectedQuickSwitchText: {
    color: '#ffffff',
    fontWeight: '500',
  },
  recentLangContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 20,
  },
  recentLangItem: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#ffffff',
    borderRadius: 20,
    paddingVertical: 8,
    paddingHorizontal: 16,
    marginRight: 8,
    marginBottom: 8,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  recentLangFlag: {
    fontSize: 18,
    marginRight: 8,
  },
  recentLangName: {
    fontSize: 14,
    color: '#1e293b',
  },
  languageGroup: {
    marginBottom: 20,
  },
  groupTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#475569',
    marginBottom: 12,
  },
  languageItem: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 8,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  selectedLanguageItem: {
    backgroundColor: '#dbeafe',
    borderWidth: 2,
    borderColor: '#3b82f6',
  },
  languageFlag: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#f1f5f9',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 16,
  },
  flagIcon: {
    fontSize: 24,
  },
  languageInfo: {
    flex: 1,
  },
  languageName: {
    fontSize: 16,
    fontWeight: '500',
    color: '#1e293b',
    marginBottom: 4,
  },
  selectedLanguageText: {
    color: '#3b82f6',
    fontWeight: 'bold',
  },
  languageNativeName: {
    fontSize: 14,
    color: '#64748b',
  },
  checkIcon: {
    fontSize: 20,
    color: '#3b82f6',
    fontWeight: 'bold',
  },
  infoCard: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 16,
    marginTop: 10,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  infoTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#1e293b',
    marginBottom: 12,
  },
  infoText: {
    fontSize: 14,
    color: '#64748b',
    lineHeight: 22,
    marginBottom: 8,
  },
  bottomNav: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ffffff',
    borderTopWidth: 1,
    borderTopColor: '#e2e8f0',
    paddingVertical: 12,
  },
  navItem: {
    alignItems: 'center',
    flex: 1,
  },
  navIcon: {
    fontSize: 20,
    color: '#94a3b8',
    marginBottom: 4,
  },
  navText: {
    fontSize: 12,
    color: '#94a3b8',
  },
});

export default LanguageApp;

---

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

打包之后再将打包后的鸿蒙OpenHarmony文件拷贝到鸿蒙的DevEco-Studio工程目录去：

最后运行效果图如下显示：

本文介绍了一个基于React Native开发的多语言设置应用的技术实现方案。该应用采用TypeScript强类型设计，构建了清晰的多语言数据模型体系，包含语言ID、代码、名称等完整信息。系统采用组件化架构设计，通过useState管理语言选择和最近使用语言状态，实现了状态驱动的UI交互。应用界面采用分层布局结构，包含头部、当前语言卡片、快速切换区域等模块，提供了直观的交互体验。文章还探讨了性能优化、国际化集成、动画效果等改进方向，并分析了该方案作为跨端迁移案例的技术价值，为移动端设置类应用开发提供了参考实践。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。