React Navigation Invariant 违规:尝试获取本机标签

Posted

技术标签:

【中文标题】React Navigation Invariant 违规:尝试获取本机标签【英文标题】:React Navigation Invariant violation: Attempt to get native tag 【发布时间】:2019-01-29 20:41:32 【问题描述】:

尝试使用 react-navigation 设置简单的导航应用时出现错误。

这里是 index.js:

/** @format */

import  AppRegistry  from 'react-native';
import  createStackNavigator  from 'react-navigation';
import SecondScreen from './app/screens/SecondScreen';
import FirstScreen from './app/screens/FirstScreen';
import  name as appName  from './app.json';

const App = createStackNavigator(
  
    SecondScreen,
    FirstScreen,
  ,
  
    initialRouteName: 'FirstScreen',
  ,
);

AppRegistry.registerComponent(appName, () => App);

这里是 FirstScreen.js:

import React,  Component  from 'react';
import  Button  from 'react-native';

export default class ReadingScreen extends Component 
  static navigationOptions = 
    header: null,
  ;

  render() 
    return <Button title="CLICK ME" onPress=this.props.navigation.navigate('SelectScreen') />;
  

当我将初始屏幕设置为 SecondScreen 时,一切都很好,但是当它像这样时,我得到了这个错误:

Invariant Violation: Attempt to get native tag from node not marked as "native"

我们将不胜感激!我整天都在寻找解决方案!

这是我的版本:

"react": "16.4.1",
"react-native": "0.56.0",
"react-navigation": "^2.12.0"

【问题讨论】:

【参考方案1】:

同样的错误,我无法导航,它只是挂起并抛出同样的错误,但是当我远程调试时它可以工作,我认为它与安装在 xcode 项目或其他东西中的可可豆荚有关。奇怪的是,几天前这个项目确实运行良好。

我做的唯一不同的事情是重新安装和更新 react 中的依赖项,也许这是当前 react-navigation 版本的错误,我是 2.11.2 版,现在是 2.12 版。

是的!解决了,就是版本。我将 react-navigation 从 2.12.0 降级到 2.11.2 并且成功了!

【讨论】:

我开始遇到同样的错误,几分钟前它工作正常。我所做的只是添加 react-native-phone-call,但删除它也不起作用。你是如何降级的? 要降级删除节点模块文件夹,然后进入 package.json 查找依赖项并更改 react-navigation:2.11.2 然后在终端执行 npm install 或更快的安装执行 yarn install【参考方案2】:

我遇到了同样的错误。奇怪的是,当我远程调试 JS 时,它可以正常工作。

我还注意到,只有当我尝试导航到我已经在其中的堆栈导航器中的另一个屏幕时才会发生这种情况(基本上,当我尝试将屏幕推送到堆栈时)。

【讨论】:

【参考方案3】:

我认为这与您的按钮组件有关。你需要传递一个函数:

所以而不是:

onPress=this.props.navigation.navigate('SelectScreen')

你会的:

onPress=() =&gt; this.props.navigation.navigate('SelectScreen')

完整代码:

export default class ReadingScreen extends Component 
  static navigationOptions = 
    header: null,
  ;

  render() 
    const  navigate  = this.props.navigation
    return <Button title="CLICK ME" onPress=() => navigate('SelectScreen') />;
  

【讨论】:

谢谢,不再出现红色错误!但是,它仍然没有导航,我得到:'可能未处理的承诺拒绝(id 0):不变违规:尝试从未标记为“本机”的节点获取本机标签' 同样的错误?我试过你的代码,它对我有用。唯一不同的是我的"react": "^16.4.2" 不,它不一样,它是一个黄色错误,当我单击按钮时它只是冻结 导航到 SecondScreen 是否修复它navigate('SecondScreen')?请记住,这是一个堆栈导航器,它将一个屏幕堆叠在另一个屏幕之上。你不是在尝试做其他事情吗? 不 :(,这就是我试过的。我只是想换屏

以上是关于React Navigation Invariant 违规:尝试获取本机标签的主要内容,如果未能解决你的问题,请参考以下文章

我需要下载 react-navigation 并使用命令 npm i @react-navigation/native 并显示错误

React Navigation基本用法

react-navigation 导航路由

React Navigation V2:navigation.push 和 navigation.navigate 的区别

使用 react-navigation 禁用返回 react-native

react-navigation