在 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>
  );
};