TaskQueue：任务错误：未定义不是反应原生的对象（评估'_this.view._component.measureInWindow'）

Posted 2023-03-07

【中文标题】TaskQueue：任务错误：未定义不是反应原生的对象（评估\'_this.view._component.measureInWindow\'）

【英文标题】：TaskQueue: Error with task: undefined is not an object (evaluating '_this.view._component.measureInWindow') in react nativeTaskQueue：任务错误：未定义不是反应原生的对象（评估'_this.view._component.measureInWindow'）

【发布时间】：2020-07-11 14:54:32

【问题描述】：

我对本机反应非常陌生，我在处理屏幕导航时使用非常简单的演示应用程序面临这个问题 收到此错误消息 TaskQueue：任务错误：未定义不是对象（正在评估'_this.view._component.measureInWindow'）

这是错误的屏幕截图：

这是我的代码 应用.js

import React, Component from 'react';
import createStackNavigator from 'react-navigation';
import HomeActivity from './components/HomeActivity';
import ProfileActivity from './components/ProfileActivity';
const RootStack = createStackNavigator(
  
    Home: 
      screen: HomeActivity,
    ,
    Profile: 
      screen: ProfileActivity,
    ,
  ,
  
    initialRouteName: 'Home',
  ,
);
export default class App extends Component 
  render() 
    return(
    <RootStack />
    );
  

HomeActivity.js

import React, Component from 'react';
import StyleSheet, Text, View, Button from 'react-native';
class HomeActivity extends Component 
  static navigationOptions = 
    title: 'Home',
    headerStyle: backgroundColor: '#03A9F4',
    headerTintColor: '#fff',
    headerTitleStyle: fontWeight: 'bold',
  ;
  render() 
    return (
      <View style=styles.container>
        <Text style=styles.headerText>Home Activity</Text>
        <Button
          title="Go to Profile Activity"
          onPress=() => this.props.navigation.navigate('Profile')
        />
      </View>
    );
  

const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  headerText: 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold',
  ,
);
export default HomeActivity;

ProfileActivity.js

import React, Component from 'react';
import  StyleSheet, Text, View, Button from 'react-native';
class ProfileActivity extends Component 
  static navigationOptions = 
    title: 'Profile',
    headerStyle: backgroundColor: '#73C6B6',
  ;
  render() 
    return (
      <View style=styles.container>
        <Text style=styles.headerText>Profile Activity</Text>
        <Button
          title="Go to Home"
          onPress=() => this.props.navigation.navigate('Home')
        />
        <Text style=styles.headerText>Create a New Profile Screen </Text>
        <Button
          title="Go to new Profile"
          onPress=() => this.props.navigation.push('Profile')
        />
        <Text style=styles.headerText> Go Back </Text>
        <Button
          title="Go Back"
          onPress=() => this.props.navigation.goBack()
        />
      </View>
    );
  

const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  headerText: 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold',
  ,
);
export default ProfileActivity;

 "dependencies": 
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/native": "^5.1.4",
    "react": "16.11.0",
    "react-native": "0.62.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-paper": "2.1.3",
    "react-native-reanimated": "^1.7.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-navigation": "2.6.2"
  

【问题讨论】：

你使用的是哪个版本的 react-navigation？

我有同样的错误。我认为是针对新版 react-native 和新版 react-native-safe-area-view 的。

@Ilario 添加了依赖列表

【参考方案1】：

这是因为 react-navigate 使用旧版本的 SafeView。

你有两种方法：

1.任重道远：需要迁移到 v5 react-navigation v4 to v5 migration。

对我来说，这很困难，并且会在我的项目中进行太多更改。

2. 非常快速且丑陋的解决方案：

转到目录 YOUR_PROJECT_PATH/node_modules/react-native-safe-area-view/index.js 并更新：

来自：

this.view._component.measureInWindow((winX, winY, winWidth, winHeight) => 

收件人：

this.view.getNode().measureInWindow((winX, winY, winWidth, winHeight) => 

你可以试试我的叉子：

"react-navigation": "git://github.com/Snailapp/react-navigation.git#2.18.5",

更新

修复了不推荐使用的 currentFocusedField 的警告：

git://github.com/Snailapp/react-navigation.git#2.18.6

更新

增加了对 iPhone MAX 版本的支持：

 git://github.com/Snailapp/react-navigation.git#2.18.7

【讨论】：

RN 说 getNode() 不再是必需的。我只是用 this.view.measureInWindow((winX, winY, winWidth, winHeight) => /..

@AzizStark 谢谢。在“react-navigation”中修复：“git://github.com/Snailapp/react-navigation.git#2.18.4”，

出色的工作@LeonidVeremchuk，感谢您的回答.. 更感谢您创建了一个分叉.. 这真的很有帮助..

替代解决方案：粘贴到您的类组件中 static navigationOptions = header: null ;

【参考方案2】：

我可以确认，Leonid 建议的第二个选项有效，请注意：

v5 有太多重大更改 fork 有效，但同步更新非常困难 已升级到 v3，为我修复了此错误

【讨论】：

我从 v2 升级到 v4，并且修复了它。

@john-doe，你能帮忙升级吗 - ***.com/questions/70782192/…

【参考方案3】：

对我来说，这发生在我将 Expo 升级到 SDK 38 时。要解决这个问题；从您的 package.json 文件中删除 "react-native-safe-area-view": "whatever version" 行。然后运行expo install react-native-safe-area-view。在不存在该软件包的版本时运行此命令会将您安装的软件包升级到最新的兼容（与 Expo）版本。

【参考方案4】：

寻求 Leonid 指出的丑陋解决方案 :D 由于支持 npm >= 2.0.0 本地依赖项，因此我最终将 react-native-safe-area-view 添加到我的仓库并添加了

"dependencies": 
  ...
  "react-native-safe-area-view": "file:./dependencies/react-native-safe-area-view",
  ...

致我的package.json。运行npm i时文件夹会复制到./node_modules

见：Local dependency in package.json

编辑：

React native 似乎没有使用符号链接，所以你不能像其他模块一样只导入本地模块。要完成这项工作，您需要导航到特定模块的根目录并运行 npm pack 将模块压缩到 tarball 中。然后你需要运行 npm i ./path/to/tarball.tgz 安装本地模块。现在也 react native 应该可以引用模块了。

来源：React Native: npm link local dependency, unable to resolve module，韦恩斯回答