React Native WebView自定义返回按钮仅登录成功后显示的问题

问题出在仅通过canGoBack判断是否显示返回按钮，登录错误跳转后虽然页面可返回，但仍处于登录流程内，不符合需求。我们需要结合URL路径判断和可返回状态，精准控制按钮的显示时机。

修改步骤： #

1. 新增状态变量，跟踪当前是否处于登录相关页面
2. 在页面导航变化时，同时更新可返回状态与登录页判断状态
3. 调整返回按钮的显示条件，仅当「页面可返回且不在登录页面」时显示

修改后的App.js代码： #

import React, { useEffect, useRef, useState } from "react";
import { StyleSheet, Platform, BackHandler, View } from "react-native";
import { WebView } from "react-native-webview";
import MyStatusBar from "./components/MyStatusBar";
import MyBackButton from "./components/BackButton";

export default function App() {
  const webViewRef = useRef();
  const [canGoBack, setCanGoBack] = useState(false);
  // 新增状态：标记当前是否在登录相关页面
  const [isOnLoginPage, setIsOnLoginPage] = useState(true);

  const onBackPress = () => {
    if (webViewRef.current) {
      webViewRef.current.goBack();
      return true;
    }
    return false;
  };

  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      onBackPress
    );
    return () => backHandler.remove();
  }, []);

  return (
    <View style={styles.container}>
      <MyStatusBar />
      <WebView
        allowsBackForwardNavigationGestures
        allowsInlineMediaPlayback
        ref={webViewRef}
        source={{ uri: "https://admin.panel/login" }}
        style={styles.webView}
        onNavigationStateChange={(navState) => {
          setCanGoBack(navState.canGoBack);
          // 判断当前URL是否属于登录相关路径（适配/login、/login/login这类子路径）
          const isLoginPath = navState.url.includes("/login");
          setIsOnLoginPage(isLoginPath);
        }}
      />
      {/* 调整显示条件：同时满足可返回、不在登录页两个要求 */}
      {canGoBack && !isOnLoginPage ? (
        <View style={styles.button}>
          <MyBackButton onPress={onBackPress} />
        </View>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webView: {
    flex: 1,
  },
  button: {
    position: "absolute",
    top: Platform.OS === "ios" ? 40 : 20,
    left: 15,
    zIndex: 100,
    backgroundColor: "#fff",
    borderRadius: 25,
    padding: 8,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

关键细节说明： #

• 登录页判断逻辑：用includes("/login")覆盖所有登录相关路径，包括错误跳转后的/login/login。如果你的后台登录路径是精确匹配（比如仅/login），可以改用正则判断：

  const isLoginPath = /\/login$/.test(new URL(navState.url).pathname);
  

• 显示条件：canGoBack && !isOnLoginPage确保只有成功登录进入后台页面后，且页面支持返回时，才显示返回按钮。
• 若你知道后台首页的固定路径（比如/dashboard），也可以直接判断当前URL是否属于后台路径，逻辑会更精准：

  const isBackstagePage = navState.url.includes("/dashboard");
  // 直接用这个状态控制显示
  setShowBackButton(canGoBack && isBackstagePage);
  

内容的提问来源于stack exchange，提问作者celo