如何让Expo Text-to-Speech在iOS设备及模拟器正常工作？

问题概述 #

• iOS模拟器及iPhone设备上，使用Expo Speech无法朗读应用内文本
• 已尝试方案：结合useEffect使用expo-av、朗读前播放MP3、切换静音/非静音模式，均未解决问题

代码问题排查 #

提供的代码存在明显拼写错误：

• 导入React状态时，useStat应为useState，该错误会导致状态管理异常，直接影响朗读逻辑的触发

解决步骤 #

1. 修正代码拼写错误
   将import React, {useStat } from 'react';修改为import React, {useState } from 'react';

2. 检查iOS系统语音设置

   • 进入设备「设置」→「辅助功能」→「语音内容」，确保「朗读屏幕」或「朗读所选内容」已启用
   • 确认en-AU（澳大利亚英语）有对应的语音包：在「语音内容」→「语音」中下载该语言的语音包，iOS部分语言需要手动下载才能使用

3. 模拟器特殊配置
   iOS模拟器的语音依赖Mac系统设置：

   • 打开Mac「系统偏好设置」→「辅助功能」→「语音」，启用「朗读所选文本」，并选择可用的语音选项

4. 简化逻辑测试
   先简化代码，直接在按钮点击时调用基础朗读方法，排除复杂逻辑干扰：

   const toggleNarration = () => {
     if (isNarrating) {
       Speech.stop();
     } else {
       Speech.speak("Hello World", { language: 'en-US' }); // 先使用系统默认支持的语言测试
     }
     setIsNarrating(!isNarrating);
   };
   

5. 权限补充（可选）
   虽然Expo Speech通常无需额外权限，但可在app.json中添加麦克风权限声明（若涉及语音输入相关操作）：

   "ios": {
     "infoPlist": {
       "NSMicrophoneUsageDescription": "需要麦克风权限以支持语音功能"
     }
   }
   

修正后完整代码 #

import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, Pressable, Dimensions } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import * as Speech from 'expo-speech';

const { width } = Dimensions.get('window');
const screenWidthMinus50 = width - 50;

const App = () => {
  const [isNarrating, setIsNarrating] = useState(false);

  const toggleNarration = () => {
    if (isNarrating) {
      Speech.stop();
    } else {
      Speech.speak("Test text", {
        rate: 1.0,
        pitch: 1.0,
        language: 'en-AU'
      });
    }
    setIsNarrating(!isNarrating);
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Pressable onPress={toggleNarration}>
        <AntDesign name="playcircleo" size={18} color={isNarrating ? 'blue' : 'black'} />
      </Pressable>
      <Text style={styles.description}>
        Test text
      </Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    padding: 20,
    alignItems: 'center',
  },
  image: {
    width: screenWidthMinus50,
    height: screenWidthMinus50,
    resizeMode: 'cover',
    marginBottom: 10,
  },
  description: {
    fontSize: 16,
    lineHeight: 24,
  },
});

export default App;

内容的提问来源于stack exchange，提问作者user24727039