在 React Native 中使用文本转语音

Question

我正在尝试开发一个反应原生应用程序，它将文本翻译成语音...... 但无法弄清楚将我的 TextInput 元素的输入链接到进行翻译的函数的方法..

我将在这里分享我的代码

const HomeScreen = ({ navigation }) => {
  const speak = () => {
    let thingToSay = "i will try to remember";
    Speech.speak(thingToSay);
  };

  return (
    <View style={styles.screen}>
      <ImageBackground
        source={require("./assets/book.png")}
        style={styles.backgroundImage}
      >
        <View style={styles.innerText}>
          <Text style={styles.textDisplay}>
            Type the sentence you want to practice
          </Text>

          <View>
            <TextInput placeholder="HERE" />
          </View>

          <Button title="TRANSLATE" onPress={speak} />
          {/* <Button title="SEND" /> */}
        </View>
      </ImageBackground>
    </View>
  );
};

Answer 1

这就是你的做法。

添加状态管理以保存文本并添加方法以更新 textInputChange 上的状态。

const HomeScreen = ({ navigation }) => {
  const [textToSpeak, setTextToSpeak] = useState('');
  
  const speak = () => {
    Speech.speak(textToSpeak);
  };
  
  const _onChangeText = text => setTextToSpeak(text);

  return (
    <View style={styles.screen}>
      <ImageBackground
        source={require("./assets/book.png")}
        style={styles.backgroundImage}
      >
        <View style={styles.innerText}>
          <Text style={styles.textDisplay}>
            Type the sentence you want to practice
          </Text>

          <View>
            <TextInput
              placeholder="HERE"
              onChangeText={_onChangeText}
            />
          </View>

          <Button title="TRANSLATE" onPress={speak} />
          {/* <Button title="SEND" /> */}
        </View>
      </ImageBackground>
    </View>
  );
};