react-native webview 中的程序“按鈕”導航到同一 webview 中的 URL

Question

好的...我會先說我有點菜鳥。 我正在使用 expo 構建一個 BASIC react-native 應用程序。 我說的是基本的，因為我將應用程序構建為簡單地成為我們網站移動版本的 webview，將所有內容保存在一個環境中（我們所有的數據庫等）並能夠對一個地方進行更改等。

也就是說，我仍在嘗試創建 Touchable Opacity 按鈕，允許在我們現有的 webview 中導航到我們網站的特定 URL。 我在 App.js 中使用當前代碼遇到的問題是我找不到正確的 function 以使 webview 在按下時呈現所需的“頁面”。 （見下面的代碼）......例如：如果我按下“主頁”按鈕，即使我已經導航到 webview 內的不同 URL 通過與 Z5A98E2840FD0141780D854D0141780D854E48D47Z 交互而被認為是“當前狀態”，因為“我的當前狀態”被認為是“我的當前狀態”，在我目前的過程中，沒有任何反應。 但是，onPress 僅在您當前不在該 state 內的情況下使用我在下面使用的代碼。 我有點卡住了，不知道如何做到這一點，以便在按下“主頁”或“媒體”時它會重新設置頁面，有效地重新呈現該頁面。

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> ```

Answer 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 function 通過以下方式“立即”呈現新變體（無論是否相同）：

           <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，然后添加rest和url，並根據現在的日期加載它。