네비게이터 내에서 호출 된 네비게이터와의 네이티브 이슈

Question

네이티브 및 ES6에 반응합니다. "부모"구성 요소에 모든 상태가 있습니다. 사용자가 "하위"구성 요소의 버튼을 클릭합니다. 그런 다음 GPS 위치 (하나의 함수)를 잡고 AJAX (다른 함수)를 통해 결과를 게시 한 다음 마지막으로 성공 페이지로 리디렉션합니다. 아이는 여기 네비게이터 호출로드 : 예상대로

<ChildComponent btnClick={this._getGps.bind(this)} /> 

위가 작동하고 같은 부모 구성 요소 같습니다 예상대로

_getGps() { 
    navigator.geolocation.getCurrentPosition(
     (position) => { 
     this._postResults(position) 
     }, 
     (error) => { 
     console.log(error) 
     }, 
     {enableHighAccuracy: true, timeout: 2500, maximumAge: 10000} 
    ) 
} 

위는 작동합니다. 그런 다음 .petch 요청을하는 _postResults를 호출합니다. 또한 잘 작동하고 유효한 응답을 반환합니다. 문제는 응답 함수 내에서 탐색기 개체에 액세스하는 것입니다. . 나는 navigator.replace 및 this.navigator.replace 시도 (범위를 찾을 수 없습니다. 초기 버튼을 클릭 이벤트 외에 이러한 기능()의 모든 부모 요소입니다

_postResults(position) { 
    fetch('https://my.rest/api', { 
    method: 'POST', 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify(position) 
    }).then((response) => response.json()) 
    .then((responseJson) => { 
     // this works fine 
     this.setState({position:position}) 
     // here is the problem 
     navigator.replace({ 
     id: 'SomeOtherComponent' 
     }) 
    }) 
    .catch((error) => console.log(error)) 
} 

네비게이터는 항상 정의되지를

을

Answer 1

해결책이 발견되었습니다. 함수가 참조로 전달 된 함수가 동일한 파일에서 비롯된 경우에도 전역 상수는 사용할 수 없습니다. 'this'는 Component 객체를 나타냅니다. 부모, ChildComponent 포함 할 때 바인딩을 통해 탐색기 개체를 전달합니다 :

<ChildComponent btnClick={this._getGps.bind(this, navigator)} 
    navigator={navigator} /> 

0 I는 ChildComponent에서 상위 _getGps 함수를 호출 할 때

네비게이터가 다음 _postResults 전달되는 N 개의 변수 (통해 자동적으로 전달되어

_postResults(n, position) { 
... 

: 드디어

_getGps(n) { 
    navigator.geolocation.getCurrentPosition(
     (position) => { 
     this._postResults(n,position) 
     }, 
     (error) => { 
     console.log(error) 
     }, 
     {enableHighAccuracy: true, timeout: 2500, maximumAge: 10000} 
    ) 
} 

_postResults에서 단편이다

n (탐색기)을 _postResults에서 사용할 수 있으며 예상대로 작동합니다.