React Native如何实现内部页面跳转 点击a链接报NoSuchKey错误如何解决

React Native 不支持 Web 端的 <a> 标签和 href 跳转语法，你写的相对路径 ./App2 无法被 React Native 路由逻辑识别，找不到对应路由映射，因此抛出 NoSuchKey 错误。

• 首先安装 React Native 生态常用的路由库 React Navigation：
  如果你使用 Expo 开发，执行以下命令：

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

  如果你使用纯 React Native 项目，执行以下命令：

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

• 配置全局路由表，注册你要跳转的 App2 页面：
  在项目入口文件（一般是 index.js 或者 App.js）中配置导航结构：

  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  import HomePage from './你的当前页面路径'; // 替换为你现在写跳转逻辑的页面文件路径
  import App2 from './App2'; // 引入你要跳转的目标页面
  
  const Stack = createNativeStackNavigator();
  
  function RootNavigator() {
    return (
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomePage} />
        {/* name属性为跳转时调用的路由标识，要和后续跳转参数保持一致 */}
        <Stack.Screen name="App2" component={App2} />
      </Stack.Navigator>
    );
  }
  
  export default function App() {
    return (
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    );
  }
  

• 替换你原有错误的跳转代码：
  去掉 <a> 标签，使用可点击组件绑定 onPress 事件触发跳转，修改后的代码如下：

  import { Text, StyleSheet } from 'react-native';
  
  // 路由包裹的页面组件可以直接从props获取navigation对象
  function HomePage({ navigation }) {
    return (
      <Text 
        style={styles.login}
        onPress={() => navigation.navigate('App2')}
      >
        Already have an account?
      </Text>
    );
  }
  
  const styles = StyleSheet.create({
    login: {
      // 保留你原来的样式配置即可
    }
  });
  

  你也可以用 TouchableOpacity 组件包裹文本，实现点击时的透明度反馈效果，使用逻辑和上面一致，只要把 onPress 绑定到 TouchableOpacity 组件上即可。

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