작업 큐:작업 오류: 정의되지 않은 것은 개체가 아니다(평가 '_the.view)._component.measureInWindow') reactive native

작업 큐:작업 오류: 정의되지 않은 것은 개체가 아니다(평가 '_the.view)._component.measureInWindow') reactive native

네이티브로 대응한 것은 처음이며, 화면 내비게이션을 처리하는 동안 매우 간단한 데모 앱으로 이 문제에 직면하게 된다. 이 오류 메시지 가져오기 작업큐:작업 오류: 정의되지 않은 것은 개체가 아니다(평가 '_the.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 />
    );
  }
}

홈액티비티.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"
  }

이것은 반응 항법 장치가 SafeView의 이전 버전을 사용하기 때문에 발생한다.

두 가지 방법이 있다.

1. 장거리: v5 react-navigation v4에서 v5로 마이그레이션해야 함

나에게는 그것이 어렵고 내 프로젝트에서 너무 많은 변화를 가져갈 것이다.

2. 매우 빠르고 추악한 해결책:

DIR_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",

업데이트됨

현재 사용되지 않는 FocusedField로 고정된 경고:

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

업데이트됨

지원 iPhone MAX 버전 추가:

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

레오니드가 제안한 두 번째 옵션이 효과가 있다는 걸 확인할 수 있어

• v5에 너무 많은 변경 사항이 있음
• 포크가 작동했지만 업데이트 동기화가 매우 어려워짐
• v3로 업그레이드하여 이 버그를 수정하십시오.

나는 엑스포에서 SDK 38로 업그레이드했을 때 이런 일이 있었어.이 문제를 해결하려면 라인을 삭제하십시오."react-native-safe-area-view": "whatever version"당신의 소포에서.json 파일그럼 도망가.expo install react-native-safe-area-view. 패키지의 버전이 없을 때 이 명령을 실행하면 설치된 패키지를 최신 호환 버전(Expo와 함께)으로 업그레이드하십시오.

레오니드 :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폴더가 복사될 것이다../node_modules달릴 때npm i

참고 항목: 패키지의 로컬 종속성.json

편집:

react native는 symlink를 사용하지 않는 것 같으므로 다른 모듈처럼 로컬 모듈을 가져올 수 없다.이 작업을 수행하려면 특정 모듈의 루트로 이동하여 실행하십시오.npm pack모듈을 타르볼에 지퍼로 고정한다.그럼 도망쳐야 해npm i ./path/to/tarball.tgz로컬 모듈을 설치하십시오.이제 반응 네이티브도 모듈을 참조할 수 있어야 한다.

출처: react Native: npm 링크 로컬 종속성, 모듈 확인 불가, Waynes 응답

참조URL: https://stackoverflow.com/questions/60944091/taskqueue-error-with-task-undefined-is-not-an-object-evaluating-this-view