react-native webview中的程序“按钮”导航到同一webview中的URL答案

【问题标题】：Program 'button' in react-native webview to navigate to URL's within the same webviewreact-native webview中的程序“按钮”导航到同一webview中的URL
【发布时间】：2021-05-21 19:24:03
【问题描述】：

好的...我会先说我有点菜鸟。我正在使用 expo 构建一个 BASIC react-native 应用程序。我说的是基本的，因为我将应用程序构建为简单地成为我们网站移动版本的 web 视图，将所有内容保存在一个环境中（我们所有的数据库等）并能够对一个地方进行更改等。

也就是说，我仍在尝试创建可触摸的不透明度按钮，以便在我们现有的 web 视图中导航到我们网站的特定 URL。我在 App.js 中的当前代码遇到的问题是我找不到正确的函数来使 webview 在Press 上呈现所需的“页面”。（见下面的代码）...例如：如果我按下“主页”按钮，即使我通过与 webview 交互导航到 webview 中的不同 URL，因为我当前的“状态”仍然被认为是“主页”在我目前的过程中，没有任何反应。但是，onPress 仅在您当前不在该状态下时才使用我在下面使用的代码。我有点卡住了，不知道如何做到这一点，以便在按下“主页”或“媒体”时它会重新设置页面，从而有效地重新呈现该页面。

export default function App() {
const [page, setPage] = useState("home");

return (
        <StatusBar hidden={false} translucent={true} />
        <SafeAreaView style={styles.flexContainer}>
          {page === "home" && (
            <WebView
              source={{ uri: "https://restoredtemecula.church" }}
              onShouldStartLoadWithRequest={(event) => {
                if (
                  event.url.match(
                    "https://restoredtemecula.churchcenter.com/giving"
                  )
                ) {
                  Linking.openURL(event.url);
                  return false;
                }
                return true;
              }}
              allowsInlineMediaPlayback="true"
              startInLoadingState={true}
              renderLoading={() => (
                <ActivityIndicator
                  color="black"
                  size="large"
                  style={styles.loadContainer}
                />
              )}
              ref={webviewRef}
              onNavigationStateChange={(navState) => {
                setCanGoBack(navState.canGoBack);
                setCanGoForward(navState.canGoForward);
                setCurrentUrl(navState.url);
              }}
            />
          )}
          {page === "stuff" && (.... (webview with same code as above pointing to different uri)...

<TouchableOpacity
              onPress={() => {
                setPage("home");
              }}
            >
              <Image
                source={require("./assets/images/home.png")}
                style={styles.ImageIconStyle}
              />
              <Text style={styles.button}>Home</Text>
            </TouchableOpacity>
<TouchableOpacity
              onPress={() => {
                setPage("media");
              }}
            >
              <Image
                source={require("./assets/images/media.png")}
                style={styles.ImageIconStyle}
              />
              <Text style={styles.button}>Media</Text>
            </TouchableOpacity> ```

【问题讨论】：

标签： javascript react-native webview expo

【解决方案1】：

我想通了！我将 webview uri 设置为可变的，并且不需要多个 webview 标签。如下：

export default function App() {
const [page, setPage] = useState("");

return (
const [baseURI] = useState("https://restoredtemecula.church");

<WebView
            source={{ uri: `${baseURI}/${page}` }} 
            ... all the rest of the code for the webview screen...

然后应用 onPress 函数通过以下方式“立即”呈现一个新的变体（无论是否相同的字符串）：

           <TouchableOpacity
              onPress={() => {
                setPage(`sermons?t=${Date.now()}`);
              }}
            >
              <Image
                source={require("./assets/images/media.png")}
                style={styles.ImageIconStyle}
              />
              <Text style={styles.button}>Media</Text>
            </TouchableOpacity>

所以它'管道'baseURI，然后添加其余的url，并根据现在的日期加载它。

【讨论】：