我无法从 google-translate 获取我的 api 调用来工作

Question

我无法弄清楚如何使用我的 google-translate API 显示我正在翻译的单词......我想显示来自函数 newText 的翻译后的单词，以显示在我调用该函数的 Text 标签中......（翻译它的词也来自 TextInput '要翻译的词'

const Main = ({ navigation }) => {
  let apiKey = "AIzaasdfasdfasdfasdfasdfsdc";
  let googleTranslate = require("google-translate")(apiKey);

  const [text, setText] = useState("");

  const newText = () => {
    googleTranslate.translate(text, "es", function (err, translation) {
      return translation.translatedText;
    });
  };

  const onChangeText = (text) => setText(text);
  return (
    <View style={styles.screen}>
      <ImageBackground
        source={require("./assets/book.png")}
        style={styles.backgroundImage}
      >
        <View style={styles.innerText}>
          <Text style={{ fontSize: 20 }}>Welcome back Elisa, </Text>
          <Text>let's practice that pronunciation...</Text>
          <TextInput
            placeholder="Word to translate"
            style={styles.input}
            onChangeText={onChangeText}
          />
        </View>

        <Text style={styles.output}>{newText()}</Text>

        <View style={styles.button}>
          <Button
            title="START"
            onPress={() => navigation.navigate("BACK_HOME")}
          />
        </View>
      </ImageBackground>
    </View>
  );
};

Answer 1

我已将 newText() 转换为异步函数。

您可以使用 onClick 事件调用 newText()，也可以使用 onChange，因为我在下面修改了您的代码。

只要您的输入发生变化，就会调用 Google 翻译（这不是一个好主意，因为这意味着如果您输入 100 个字符，它就会翻译 100 次。

我建议你添加一个这样的按钮。

<button onClick={() => newText(text)}>Translate Me!</button>

const Main = ({ navigation }) => {
  let apiKey = "AIzaasdfasdfasdfasdfasdfsdc";
  let googleTranslate = require("google-translate")(apiKey);

  const [text, setText] = useState("");
  const [ translated, setTranslated ] = useState('');

  const newText = async (toBeTranslated) => {
    await googleTranslate.translate(toBeTranslated, "es", function (err, translation) {
      setTranslated(translation.translatedText)
    });
  };

  const onChangeText = (text) => {
     setText(text);
     //handle translation when text change.
     newText(text);
  }
  return (
    <View style={styles.screen}>
      <ImageBackground
        source={require("./assets/book.png")}
        style={styles.backgroundImage}
      >
        <View style={styles.innerText}>
          <Text style={{ fontSize: 20 }}>Welcome back Elisa, </Text>
          <Text>let's practice that pronunciation...</Text>
          <TextInput
            placeholder="Word to translate"
            style={styles.input}
            onChangeText={onChangeText}
          />
        </View>

        <Text style={styles.output}>{translated}</Text>

        <View style={styles.button}>
          <Button
            title="START"
            onPress={() => navigation.navigate("BACK_HOME")}
          />
        </View>
      </ImageBackground>
    </View>
  );
};