React Native不同页面跳转实现咨询：是否有类似HTML a href的替代方案？

类HTML a 标签的适配方案 #

• 跳转到外部链接场景：可以直接使用RN内置的LinkingAPI，效果和a href跳外部站完全一致，示例代码：

import { Text, Linking } from 'react-native';

// 组件内使用
<Text 
  style={{color: 'blue', textDecorationLine: 'underline'}}
  onPress={() => Linking.openURL('https://example.com')}
>
  跳转到外部站点
</Text>

• 应用内页面跳转场景：没有和a href完全等价的原生组件，RN的应用内页面基于页面栈逻辑管理，需要配合导航库实现。

应用内页面跳转具体实现逻辑 #

RN的应用内跳转本质是维护一个页面栈结构：打开新页面就是将页面对象推入栈顶，返回上一页就是将栈顶的页面弹出。主流实现使用React Navigation库，步骤如下：

1. 安装依赖
   执行命令安装核心包和依赖：

npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

2. 全局配置导航容器
   在应用入口文件（通常是App.js）中注册所有页面和导航容器：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// 引入你自己的页面组件
import HomeScreen from './screens/Home';
import DetailScreen from './screens/Detail';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        {/* 所有可跳转的页面都需要在这里注册，name属性就是跳转用的路由名 */}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

3. 文本点击跳转实现
   在页面组件中调用导航方法触发跳转，示例：

import { Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  // 获取导航实例
  const navigation = useNavigation();
  return (
    // 用TouchableOpacity包裹文本实现点击效果，也可以直接给Text加onPress属性
    <TouchableOpacity onPress={() => {
      // 第一个参数是之前注册的路由名，第二个参数是要传递给目标页的参数
      navigation.navigate('Detail', { goodsId: 1001, goodsName: '测试商品' })
    }}>
      <Text style={{color: 'blue', textDecorationLine: 'underline'}}>
        点击跳转到商品详情页
      </Text>
    </TouchableOpacity>
  )
}

4. 目标页接收参数
   在跳转后的页面可以通过路由对象拿到传递的参数：

import { Text, View } from 'react-native';
import { useRoute } from '@react-navigation/native';

function DetailScreen() {
  const route = useRoute();
  const { goodsId, goodsName } = route.params;
  return (
    <View>
      <Text>商品ID：{goodsId}</Text>
      <Text>商品名称：{goodsName}</Text>
    </View>
  )
}

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