React Native中react-native-tts报speak为null的TypeError原因

出现这个错误的核心原因是TTS模块还没完成原生端的初始化绑定，就被调用了相关方法，具体拆解为两个点：

• 初始化时机错误：你在模块导入后直接执行Tts.setDefaultRate、Tts.setDefaultPitch，此时react-native-tts还没完成和原生层的绑定，TTS实例处于null状态，调用自然会报错。
• 函数组件未遵循生命周期规则：你的代码在函数组件外部执行初始化逻辑，函数组件的挂载流程还没走完，原生模块还没就绪，导致调用失败。

修复方案及代码示例 #

把TTS的初始化逻辑放到函数组件的useEffect钩子中（对应类组件的componentDidMount），确保组件挂载完成后再初始化TTS：

import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import Tts from 'react-native-tts';

const MyComponent = () => {
  useEffect(() => {
    // 组件挂载后初始化TTS
    const initTTS = async () => {
      try {
        // 先确认TTS引擎已初始化
        await Tts.getInitStatus();
        // 设置默认参数
        Tts.setDefaultRate(0.5);
        Tts.setDefaultPitch(1.0);
      } catch (error) {
        console.error('TTS初始化失败:', error);
      }
    };

    initTTS();

    // 组件卸载时清理TTS资源，避免内存泄漏
    return () => {
      Tts.stop();
      Tts.destroy();
    };
  }, []);

  const speakText = (text) => {
    Tts.speak(text)
      .then(() => console.log(`已朗读: ${text}`))
      .catch((error) => console.error(`朗读出错: ${error}`));
  };

  return (
    <View>
      <Button title="开始朗读" onPress={() => speakText('Hello, world!')} />
    </View>
  );
};

export default MyComponent;

额外排查点 #

1. 确认原生链接完成：React Native 0.60+支持自动链接，旧版本需要手动执行react-native link react-native-tts，之后重新编译项目。
2. 重启项目和Metro：依赖安装后可能需要清除缓存重启，执行npm start --reset-cache，再重新运行react-native run-android/react-native run-ios。
3. 权限配置检查：
   • Android：在AndroidManifest.xml中添加必要权限（如android.permission.INTERNET，部分TTS引擎需要联网加载语音包）。
   • iOS：在Info.plist中添加对应的权限描述（如果用到语音识别或麦克风）。

内容的提问来源于stack exchange，提问作者H.W.K. Aravinda