react-native-webview 导航到用户定义的 uri

Question

在发布这个问题之前，我发现了很多关于 react-native-webview 组件的教程。不幸的是，没有一个非常基础的教程展示了除了实现基本的向前/向后导航之外如何做任何事情。我还快速检查了文档，希望找到一个在 webview 加载后更新 uri 的示例。这是我的尝试，有人可以告诉我如何使此功能起作用吗？

export default function App() {
  const [uriInput, setUri] = useState();
  const webviewRef = useRef();

  return (
    <View style={styles.container}>
      <TextInput
        onChangeText={(text) => {
          setUri(text);
        }}
        style={styles.input}
      />
      <Button
        title="Go!"
        onClick={() => {
          webviewRef.source = { uri: uriInput };
        }}
      />
      <WebView
        ref={webviewRef}
        style={styles.webView}
        source={{ uri: "http://example.com" }}
      />
    </View>
  );
}

Answer 1

自己解决了这个问题。

export default function App() {
  const [uriInput, setUri] = useState();
  const [navUri, setNavUri] = useState();

  return (
    <View style={styles.container}>
      <TextInput style={styles.input} onChangeText={(text) => setUri(text)} />
      <Button
        title="Go!"
        onPress={() => {
          setNavUri(uriInput);
        }}
      />
      <WebView source={{ uri: navUri }} />
    </View>
  );
}