Let's tackle your two issues one by one—they're both tied to how React Native's Linking behaves in a web environment, which has key differences from native apps.

1. Fix in-tab navigation & the disappearing URL tail #

The core problem with Linking.openURL() on web is that it uses window.open() under the hood (which defaults to new tabs) and doesn't properly update the current page's address bar or history for relative paths. To fix this, we'll add a platform check to use browser-native location handling on web, while keeping native behavior intact.

Update your Information component like this:

import { Linking, Platform, StyleSheet, Text, View } from "react-native";
import React from "react";

const Information = () => {
  const handleNavigation = () => {
    if (Platform.OS === 'web') {
      // On web, directly update the current tab's location
      window.location.href = '/feed'; // Adjust the path to match your app's routing structure
    } else {
      // For native apps, keep using Linking as before
      Linking.openURL('feed');
    }
  };

  return (
    <Text onPress={handleNavigation} >
      AboutReact
    </Text>
  );
};

export default Information;
const styles = StyleSheet.create({});

Why this works:

• On web, window.location.href modifies the current tab's URL and loads the page, ensuring the address bar stays consistent with the active page.
• The Platform.OS check ensures your native app navigation remains unchanged.

2. Fix URL display in the Feed page #

Your current Feed component uses Linking.getInitialURL(), which only returns the URL that launched the app initially. For post-launch navigations (like clicking your link), you need to directly access the browser's current location on web. Here's the updated Feed component:

import { KeyboardAvoidingView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
import React, { useEffect, useState } from "react";

const Feed = () => {
  const [currentUrl, setCurrentUrl] = useState('');

  useEffect(() => {
    // Capture the current URL when the component mounts (web-only)
    if (typeof window !== 'undefined') {
      setCurrentUrl(window.location.href);
      
      // Optional: Update URL if user uses browser back/forward buttons
      const handlePopState = () => {
        setCurrentUrl(window.location.href);
      };
      window.addEventListener('popstate', handlePopState);
      
      // Clean up the event listener on unmount
      return () => window.removeEventListener('popstate', handlePopState);
    }
  }, []);

  return (
    <Text>{currentUrl}</Text>
  );
};

export default Feed;

Key improvements:

• Uses useState and useEffect to grab the current window.location.href when the component loads.
• Adds a popstate event listener to update the URL if the user navigates with browser controls (optional but makes the web experience more polished).
• Removes Linking.getInitialURL() since it doesn't reflect post-launch navigation changes on web.

Bonus: For a more scalable solution #

If you plan to add more pages to your app, consider using a cross-platform routing library like react-router-native or expo-router. These tools handle web and native routing consistently, so you won't need to write platform-specific navigation logic for every link.

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