React-native-router-flux: 팝 후 강제 재렌더링 장면

귀하의 답변에 감사드립니다. 그러나 작동하지 않습니다 ;)
이전보기를 새로 고치지 않습니다 ...

상태 내에서 무언가가 변경되면 새로 고쳐야한다고 생각합니다. 따라서 새로 고침 내에서 임의의 값을 설정하십시오.

2016년 4월 9일 09:51에 rtrompier [email protected]에서 다음과 같이 썼습니다.

귀하의 답변에 감사드립니다. 그러나 작동하지 않습니다 ;)
이전보기를 새로 고치지 않습니다 ...

—
이 스레드에 가입했기 때문에 이 메시지를 받고 있습니다.
이 이메일에 직접 답장하거나 GitHub https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment -207737400에서

아무도 Actions.pop() 후에 새로 고침하는 방법을 말해 줄 수 있습니까?

다시 말하지만, 새로 고치려면 이전 구성 요소의 상태를 변경해야 합니다. NavigationExperimental API가 작동하는 방식입니다.

@aksonov @helloworld123456 및 @rtrompier 와 동일한 문제가 있습니다. 내 탐색 흐름은 다음과 같습니다.

장면 A => 장면 B => 장면 C

C에서 B로 팝할 때 Scene B를 다시 렌더링해야 합니다. Actions.pop(); Actions.refresh(); 사용을 제안한 것을 보니 두 가지 질문이 있습니다.

1. Actions.refresh() 호출하면 Scene C 또는 B가 다시 렌더링됩니까?
2. 탐색 모음에서 뒤로 버튼의 onPress 핸들러를 재정의할 수 있습니까? 코드를 보면 가능한 것 같지 않습니다.

1. B를 새로 고쳐야 하지만 테스트하고 알아내지 않겠습니까!
2. renderBackButton 를 사용하여 자신의 뒤로 버튼, 사용자 정의 onPress 등을 전달하십시오.

알겠습니다 - 감사합니다 @cridenour

@samdturner 방법을 알려

감사합니다

@alfan2305

Actions.pop();
Actions.refresh();

navBar 내에서는 어떻습니까? 우리가 안되는 refresh=true 온 Scene . 그렇지 않으면 onPress 에 대한 backButton 를 위의 두 호출을 호출하는 함수로 재정의해야 합니다.

@ssomnoremac 버튼을 재정의하는

@cridenour 경로 변경 시 장면을 다시 렌더링하는 기능을 갖는 것은 이 질문의 범위를 넘어선다고 생각합니다. 제 경우에는 등록 시퀀스에서 돌아가서 재설정을 뒤로 버튼에 연결하는 대신 다시 렌더링할 때 작업을 실행하여 Redux 스토어에서 등록 상태를 재설정하고 싶습니다. 이 작업을 수행하는 더 좋은 방법이 있습니까?

귀하의 등록 구성 요소가 redux를 수신하여 변경 사항을 수신할 것이라고 생각하지 않습니까? 아니면 다른 구성 요소가 맨 위에 있을 때 새 소품을 받은 후 장면이 다시 렌더링되지 않는 문제입니까?

내 말은 onBack 하므로 등록 장면을 정의할 때 다음과 같이 간단해야 합니다.

const refreshOnBack = () => { Actions.pop(); Actions.refresh(); }

...
<Scene key="registration" component={Registration} onBack={refreshOnBack} />
...

덕분에 대해 알고하지 않았다 onBack 나는 사용으로 detailedExample를 내 문서로.

괜찮아요. https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md를 살펴보세요. "오프북"으로 갈 때 많은 유연성이 있기 때문입니다. :)

안녕하세요 여러분,
우선 : 반응 및 자바 스크립트 코딩의 초보자이므로 통찰력에 감사드립니다.

방금 @cridenour에서 "refreshOnBack" 솔루션을 시도했습니다 . 불행히도 몇 가지 어려움을 겪었습니다.

이제 버튼은 아무 것도 하지 않습니다. 버튼 자체가 강조 표시되더라도 "C" 장면( @ssomnoremac 예제 참조)에
const refreshOnBack = () => { Actions.pop(); }
부모 보기를 업데이트하지 않고 예상한 동작이 있습니다.

내가 무엇을 놓치고 있습니까? :/

@Brokray 와 동일한 결과가

원격으로 디버그하면 콘솔에 오류가 표시됩니까?

@cridenour 콘솔에 오류가 없습니다.
무슨 일이 일어나고 있는지 알아내기 위해 콘솔에 기록할 수 있는 것이 있습니까? 감속기에서 뭔가?
감속기는 여전히 나에게 약간의 미스터리입니다.

감사 해요.

흠! 새로 고침을 먼저 시도하십시오.

Actions.refresh({key: 'yourSceneKey'}); Actions.pop();

도움을 주셔서 감사합니다 @cridenour : 방금 귀하의 아이디어를 시도했지만 불행히도 작동하지 않습니다. 아무 문제 없이 C에서 B로 이동했지만 "B"는 변경되지 않았습니다.
refresh() 메서드에서 문제가 발생한 것 같습니다. 'B' 장면에 새로 고침 버튼을 놓아도( Actions.refresh() 호출) 아무 일도 일어나지 않습니다.

@jholton 도움이 될지 모르겠지만 내 장면을 업데이트하는 사용자 지정 방법을 찾았습니다.
각 장면(B & C)에 대한 감속기가 있습니다. 'C'에서 POST 액션을 호출하면 두 감속기 모두 호출을 받고 C는 필요한 작업을 수행하고 B는 상태 변수 '를 설정합니다. 업데이트'를 true .
이런 식으로 B의 "ComponentWillReceiveProps"에서 '업데이트'를 테스트하고 장면을 새로 고치는 데 필요한 것을 다시 호출합니다.

누군가 Actions.refresh() 문제에 대해 더 많은 통찰력을 갖고 있다면 주저하지 마십시오!
감사 해요.

@Brokray 작동하지 않았다는 점은

@Brokray 너무 문제가 되지 않는다면 예를 들어주실 수 있나요? 단일 장면에 대한 감속기가 어떻게 있습니까? 나는 모든 문서를 읽었지만, 이 시점에서 내 머리를 약간 넘어섰습니다.

@cridenour 예, 앱 상태 자체를 전달하고 싶지 않습니다. 장면 B가 다시 렌더링되기를 원합니다.
장면 B에서는 데이터베이스별로 일부 데이터를 표시합니다. 장면 C에는 데이터베이스에 데이터를 추가하는 양식이 있습니다. 사용자가 장면 B로 되돌아갈 때 모든 수명 주기 메서드(예: getInitialState, componentWillMount 등)가 실행되어 새로 추가된 데이터가 검색되고 표시되기를 원합니다. 이러한 수명 주기 메서드는 실행되지 않습니다.

@jholton 정확합니다. 좋든 나쁘든 React의 설계에 의한 것입니다. 플럭스 구현(많은 사람들이 redux와 개인적으로 Alt를 사용함)을 시도하고 그곳에서 데이터를 관리하는 것이 좋습니다. 이렇게 하면 데이터를 업데이트할 때 구성 요소가 다시 렌더링되고( render() 다시 실행) 구성 요소 초기화에 의존하지 않습니다. React의 많은 반응 문제는 데이터 계층을 구성 요소에서 멀리 옮기면 훨씬 쉬워집니다(그리고 데이터를 읽고 표시하기만 하면 됨).

즉, Actions.refresh()는 새 소품과 다시 렌더링(다시 render() )만 발생하지만 componentWillMount 등은 호출하지 않습니다.

@jholton 글쎄요, @cridenour가 말했듯이 액션, 상태 및 리듀서를 통해 데이터를 관리할 수 있는 플럭스 구현(실제로 redux)을 사용합니다. 플럭스 구현에 익숙해지면 기꺼이 예제를 제공하겠습니다!
@cridenour 도와 주셔서 다시 한번 감사드립니다!

@Brokray 예, 지금 Redux 자습서에 뛰어들고 있습니다. 플럭스/리덕스를 보다 지능적으로 논의할 수 있게 되면 이 스레드를 다시 방문하겠습니다. 감사 해요.

업데이트 된 소품에서 성공할 수 있지만 다음보기로 다시 이동하려고하면 오류가 발생합니다.
이 코드는 내 설정 화면에 작성되었습니다.
액션.팝();
Actions.refresh({키: '페이지원', 이름:'wwwww'});

이것은 작동하고 보기를 업데이트하지만 다시 설정 화면으로 이동하려고 하면 오류가 발생합니다.

지연 후 소품으로 빈 새로 고침을 호출하여 마침내 해결할 수 있습니까?
Actions.popTo('페이지원');
setTimeout(() => {
Actions.refresh({이름:'zzzzar'});
console.log("zzzz");
}, 10);

@washaq : 그것은 나를 위해 트릭을했습니다

@ronyv89 다행이군요. 도움이 될 사람이 있나요? " https://github.com/facebook/react-native/issues/9280 "

액션.팝(); Actions.refresh();
페이지를 새로고침하기만 하면 이전 장면으로 이동하지 않습니다.

Action 메서드를 기반으로 약속할 수 있으면 다음과 같이 함께 연결할 수 있습니다.

Actions.pop().then(Actions.refresh()).

또는

Actions.pop().refresh()

@israrrhnrtech 및 @tuneZola 이전의 새로 고침을 호출하려면 작동하지 않습니다. 그러면 지연 후에 호출해야 합니다. 그러면 제대로 호출됩니다.

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

우선 @tuneZola 와 @washaq에 답장을 보내주셔서 감사합니다.
액션('페이지원');
setTimeout(() => {
Actions.refresh({이름:'zzzzar'});
console.log("zzzz");
}, 10);

이 코드는 매우 잘 작동합니다.
다시한번 감사합니다..

@israrrhnrtech 문제

내 장면에서 동일한 문제에 직면하고 있습니다.

A => B

BI에서 내 redux 저장소 상태를 변경하지만 Router.pop() 하면 componentWillReceiveProps가 A에서 트리거되지 않습니다.

내 router.pop은 B 페이지 내부에 로컬로 존재하므로(기본 navBar를 사용하지 않음)

Router.pop()
Router.refresh()

작동하지 않고 시간 초과를 설정해도 작동하지 않습니다. 이를 달성하는 방법에 대한 아이디어가 있습니까?

변경하려는 소품을 전달할 때만 업데이트합니다.

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

여기서 나는 내 메인 보기에서 이름을 소품으로 전달합니다. 즉, 텍스트를 업데이트하기 위해 this.props.name 를 사용하는 경우 업데이트된 상태를 업데이트된 상태로 전달해야 하기 때문입니다.
이것이 도움이 되기를 바랍니다.

나를 위해 이것을 적용하면 :
navigator.replacePreviousAndPop(이전 경로);

@phpscrpt , 작동 방식에 대한 일부 코드로 더 간략하게 설명할 수 있습니까?

@israrnrtech 죄송합니다. react-native에 내장된 Navigator 구성 요소에 대한 것입니다. react-native-router-flux가 Navigator 구성 요소에서 상속되면 어떻게 든 작동할 수 있습니다.

@washaq 아래에 구현된 시간 초과 솔루션이 작동하지 않습니다.

backAndRefresh(){

액션.팝();
setTimeout(() => {
Actions.refresh({이름:'zzzzar'});
console.log("zzzz");
}, 10);

}

돌아가서 새로고침

새로 고침하려는 페이지의 componentDidMount가 호출되지 않습니다.

내가 뭔가를 놓치고 있습니까?

감사 해요!

@ivansifrim 이에 대한 해결책을 찾았습니까?
우리는 또한 화면에 착지한 후 작업을 트리거하는 방법을 찾으려고 노력하고 있습니다.

이것은 저에게 효과적입니다. Actions.pop({ refresh: {} });
현재 화면을 띄우고 상위 화면을 새로 고칩니다.

@JeroenNelen - 아직 해보지 않았지만 @Bertjuhh가 제안한 대로 시도해 보겠습니다.

언급된 문제에 대한 해결책이 있습니까?

이것은 나를 위해 잘 작동합니다.

const refreshOnBack = () => { Actions.pop({ refresh: {} }); }
...
// child scene
<Scene key="settings" component={SettingsScreen} onBack={refreshOnBack}/>
...

최근에 수행한 간단한 앱에서 다음과 같이 이 문제를 해결했습니다(이 코드는 내보내기 위의 라우터 파일에 있음).

Actions.pop = () => Actions.NAME_OF_PREVIOUS({ type: ActionConst.RESET });

pop 를 재정의하는 데 사용하는 함수에서 몇 가지 조건부 논리를 수행해야 합니다. 제 경우에는 아름답게 작동했습니다 ( ActionConst.RESET 를 사용하는 동안 대체 백 전환에 신경 쓰지 않습니다). 빠르고 불쾌합니다.

마침내 여기에 잘 작동하는 것이 있습니까? 위의 제안 중 어느 것도 실제로 작동하지 않습니다 ...

+1

@ivansifirm 마지막으로 작동해야 합니다. 새로고침할 때 사용한 것을 기억합니다. 즉, '이름' 위의 날짜를 취소하려는 소품은 이전 보기에서 업데이트하려는 소품입니다.

여기에서 동일한 문제가 매우 이상합니다.
때로는 작동하고 때로는 작동하지 않습니다.

여기 내 코드가 있습니다. (내 경우에는 A씬과 B씬이 있고, A=>B는 네비게이션, B=>A는 팝핑으로)

장면 A:
componentWillReceiveProps(nextProps) { if (this.props.test !== nextProps.test) { this._getUser() // I need call this func after pop } }
장면 B

NavigationActions.pop({refresh:{test:true}})

나에게 뭐가 문제 니 ?
감사 해요.

NavigationActions.pop({새로고침:{테스트:참}})

당신은 그것을 변경할 수 있습니다

NavigationActions.pop({새로고침:{테스트:!테스트}})

2017년 6월 20일 화요일 오후 7시 29분, MobileStar [email protected]
썼다:

여기에서 동일한 문제가 매우 이상합니다.
때로는 작동하고 때로는 작동하지 않습니다.

여기 내 코드가 있습니다. (나의 경우 씬 A와 B가 있고, A=>B를 탐색하여,
B=>A 팝핑)

장면 A:

componentWillReceiveProps(nextProps) {
if (this.props.test !== nextProps.test) {
this._getUser() // 팝 후에 이 함수를 호출해야 합니다.
}
}

장면 B

NavigationActions.pop({새로고침:{테스트:참}})

나에게 뭐가 문제 니 ?
감사 해요.

—
이 스레드에 가입했기 때문에 이 메시지를 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment-309945049 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AExqB3CZM4U1yuwKslfuBj88uVVJulGtks5sGIAbgaJpZM4H_0pN
.

@nikitph 도와주셔서 감사합니다.
네, 시도해 봤습니다.
그러나 componentWillReceiveProps는 팝업 후에 항상 실행되지 않습니다.
componentWillReceiveProps가 실행되거나 pop 후에 다른 수명 주기 func가 실행될 때 알려주실 수 있습니까?
문안 인사.

@SelfnessAid 아, 이제 내가 이 문제 해결을 포기한 이유를 기억합니다. 나는 비슷한 문제가 있었다. "하지만 componentWillReceiveProps가 팝업 후에 항상 실행되는 것은 아닙니다." 대상 페이지에 있는 스와이프할 수 있는 보기의 인덱스가 새로 고침을 구동하도록 하여 문제를 해결했다고 생각합니다. 예, 짜증나지만 내 문제를 해결하고 있습니다.

나는 뭔가를 알아 냈습니다. 나는 그것이 전혀 깨끗하다고 ​​생각하지 않지만 나를 위해 그것은 일을하므로 여기에 있습니다. (나는 이것을 하기 위해 Redux를 사용하고 있다)

Action.scene() 또는 Action.pop() 할 때마다 가져오기 기능을 호출해야 했습니다. 이 가져오기는 처음에 componentWillMount 메서드에서 호출되었지만 Action.pop() 사용할 때 호출되지 않았기 때문에 모든 Action.scene() 및 Action.pop() 호출을 2개의 사용자 정의 함수로 변경했습니다. 평소보다 더 많은 redux 컨테이너가 있음을 의미하지만 eh :/. 여기 그들이 있습니다:

const goTo = (scene, label, sceneParams = {}, pushed = true) => ( // Equivalent of `Action.scene()`
   (dispatch) => {
     dispatch(setAppLabel(scene, label, sceneParams, pushed)); // I'm storing some infos about the scene in my store. Will be used in custom `pop()` later.
     mapSceneToAction(scene, dispatch, sceneParams); // // Calls the function initially used in the componentWillMount. I'll show a sample further
     Actions[scene](sceneParams);
   }
);

const pop = () => (  // Equivalent of `Action.pop()`
   (dispatch, getState) => {
     Actions.pop();
     mapSceneToAction(getState().sceneReducer.previousScene, dispatch, getState().sceneReducer.previousScene.itemProps); // Retrieving some infos stored in the store during `goTo()`
   }
);

mapSceneToAction()은 다음과 같습니다.

const mapSceneToAction = (scene, dispatch, itemProps) => {
  switch (scene) {
    case 'events':
      dispatch(fetchEvents()); // Or any other action :P
      break;
    case 'anyScene':
      dispatch(anyAction(withAnyParams));
      break;
    default:
  }
};

약간 까다롭고 무겁고 깨끗하지 않을 수도 있지만 이 방법을 사용하고 있기 때문에 가지고 있던 모든 문제를 해결할 수 있었습니다.

함수 소품을 다음 장면으로 전달..
Actions.YourRoute({ onPress: () => setState.. });

그런 다음 다음 장면에서 prop 함수를 호출합니다.
this.props.onPress();

@bethuel11 이것은 루프에서 구성 요소를 다시 렌더링합니다. 좋은 해결책은 아니지만

간단한 트릭을 찾았습니다 ...

현재 상태 / 현재 페이지 =>

액션.팝();
setTimeout(() => {
Actions.refresh({
isRefresh: 사실,
});
}, 0);

이전 상태 / 페이지 => 렌더링 내부에 아래 조건 추가,

if(this.props.isRefresh){
Actions.refresh({
isRefresh: 거짓,
});
//여기서 set state를 호출하면 자동으로 다시 렌더링됩니다...
this.setState({isloading:true});

감사 해요.
}