React-native-router-flux: Forçar a re-renderização da cena após o pop

Obrigado pela sua resposta, mas não funciona;)
Não atualiza a vista anterior ...

Eu acho que ele deve atualizá-lo se algo for alterado em seu estado. Portanto, defina algum valor aleatório na atualização

Em 09 de abril de 2016, às 09:51, rtrompier [email protected] escreveu:

Obrigado pela sua resposta, mas não funciona;)
Não atualiza a vista anterior ...

-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente ou visualize-o no GitHub https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment -207737400

Alguém poderia me dizer como atualizar após Actions.pop ()?

Novamente, você deve alterar o estado do componente anterior para ser atualizado. É assim que a API NavigationExperimental funciona.

@aksonov Estou tendo o mesmo problema que @ helloworld123456 e @rtrompier . Meu fluxo de navegação é o seguinte:

Cena A => Cena B => Cena C

Quando vou de C para B, preciso refazer a cena B. Vejo que @ Elyx0 sugeriu o uso de Actions.pop(); Actions.refresh(); Tenho duas perguntas:

1. Chamará Actions.refresh() rerender Cena C ou B?
2. É possível substituir o manipulador onPress do botão Voltar na barra de navegação? Parece que não é possível depois de examinar o código.

1. Deve atualizar B, mas por que você não testa e descobre!
2. Use renderBackButton para passar seu próprio botão Voltar, onPress personalizado e tudo.

Entendi - obrigado @cridenour

@samdturner você pode me dizer como?

Obrigado

@ alfan2305

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

e dentro de navBar ? Não deveríamos ter um refresh=true em Scene . Caso contrário, tenho que substituir onPress por backButton para uma função que chama as duas chamadas acima.

@ssomnoremac O que há de errado em substituir o botão? Muito simples de fazer. Se esse problema fosse mais popular, eu diria que adicionamos a funcionalidade, mas parece ser um caso extremo.

@cridenour Acredito que vai além do escopo desta questão ter a capacidade de refazer uma cena na mudança de rota. No meu caso, quero voltar de uma sequência de registro e ter o estado do registro redefinido em minha loja Redux disparando uma ação na re-renderização em vez de ligar o reset ao botão Voltar. Existe uma maneira melhor de fazer isso?

Eu acho que seu componente de registro receberia a alteração ouvindo redux, não é? Ou o problema é que a cena não é renderizada novamente depois de receber novos adereços quando outro componente é colocado no topo?

Quer dizer, fornecemos um onBack portanto, ao definir a cena de registro deve ser tão simples quanto

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

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

obrigado, não sabia sobre onBack porque uso o DetailedExample como meus documentos.

Sem problemas. Definitivamente, dê uma olhada em https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md, pois há muita flexibilidade lá para quando você sair do livro :)

Ola pessoal,
Em primeiro lugar: obrigado a todos por seus insights, eles são realmente úteis, pois sou um novato em codificação react e javascript.

Acabei de experimentar a solução "refreshOnBack" do @cridenour : infelizmente encontrei algumas dificuldades.

Agora o botão simplesmente não faz nada. Eu apenas permaneço na minha cena "C" (referindo-se ao exemplo @ssomnoremac ) mesmo se o botão se realçar. Se eu apenas definir:
const refreshOnBack = () => { Actions.pop(); }
Eu tenho o comportamento esperado sem uma atualização da visão dos meus pais.

O que estou perdendo ? : /

Eu tenho os mesmos resultados que @Brokray

Se você depurar remotamente, verá um erro no console?

@cridenour sem erros no console.
Existe alguma coisa que eu possa registrar no console para descobrir o que está acontecendo? Algo do redutor, talvez?
O redutor ainda é um mistério para mim.

Obrigado.

Hmm! Tente fazer a atualização primeiro.

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

Obrigado pela ajuda @cridenour : Acabei de experimentar a sua ideia, mas infelizmente também não funciona. Eu vou de C para B sem problemas, mas "B" não mudou.
Parece que o problema vem do método refresh() : mesmo se eu colocar um botão de atualização na cena 'B' (chamando Actions.refresh() ), nada acontece.

@jholton Não sei se isso pode te ajudar, mas: Eu encontrei uma maneira personalizada de atualizar minha cena:
Eu tenho um redutor para cada cena (B e C), quando chamo minha ação POST em 'C', ambos os meus redutores captam a chamada, C faz o que precisa fazer e B define uma variável de estado ' atualizar 'para true .
Dessa forma, no "ComponentWillReceiveProps" de B, eu testo 'update' e chamo novamente o que preciso para atualizar a cena.

Se alguém tiver mais informações sobre o problema de Actions.refresh() , não hesite!
Obrigado.

@Brokray Interessante que não funcionou - mas você tem a melhor solução de qualquer maneira. Eu não acredito em tentar usar o sistema de navegação para passar o estado do aplicativo - eu sempre fico com os armazenamentos de fluxo.

@Brokray se não for muito problema, você pode dar um exemplo? Como você tem um redutor para uma única cena? Eu li toda a documentação, mas está um pouco além da minha cabeça neste momento.

@cridenour Sim, não quero passar o estado do aplicativo em si. Eu só quero que a cena B seja refeita.
Na cena B, eu exibo alguns dados do banco de dados. Na cena C, tenho um formulário que adiciona dados ao banco de dados. Quando o usuário volta para a cena B, eu só quero que todos os métodos de ciclo de vida (por exemplo, getInitialState, componentWillMount, etc) sejam acionados para que os dados recém-adicionados sejam recuperados e exibidos. Esses métodos de ciclo de vida não disparam.

@jholton Correto, e isso foi feito pelo próprio React, para melhor ou pior. Eu sugiro que você experimente uma implementação de fluxo (muitas pessoas gostam de redux, eu pessoalmente uso Alt) e gerencie os dados lá. Dessa forma, quando você atualizar os dados, o componente será renderizado novamente (isso significa executar novamente render() ) e não dependerá da inicialização do componente. Muitos problemas de reação no React se tornam muito mais fáceis quando você afasta a camada de dados dos componentes (e eles apenas lêem os dados e exibem).

Dito isso, Actions.refresh () só causará novos adereços e uma re-renderização (novamente, apenas render() ), mas não chamará componentWillMount, etc.

@jholton Bem, como @cridenour disse, eu uso uma implementação de fluxo (redux, na verdade) que permite que você gerencie seus dados por meio de ações, estado e redutor. Assim que estiver familiarizado com a implementação do fluxo, terei prazer em fornecer um exemplo!
@cridenour Obrigado novamente por sua ajuda!

@Brokray Sim, estou mergulhando nos tutoriais do Redux agora. Vou revisitar este tópico quando puder discutir fluxo / redux de forma mais inteligente. Obrigado.

terei sucesso em adereços atualizados, mas quando tento passar para a próxima visualização novamente, isso me dá um erro
este código está escrito na minha tela de configuração
Actions.pop ();
Actions.refresh ({key: 'pageOne', nome: 'wwwww'});

Só isso vai funcionar e atualizar a visualização, mas quando tento ir novamente para a tela de configuração, ocorre um erro

irei finalmente resolver isso chamando a atualização vazia com adereços após o atraso
Actions.popTo ('pageOne');
setTimeout (() => {
Actions.refresh ({name: 'zzzzar'});
console.log ("zzzz");
}, 10);

@washaq : Isso funcionou para mim

@ ronyv89 glade funcionou para u https://github.com/facebook/react-native/issues/9280 "

Actions.pop (); Actions.refresh ();
apenas atualiza a página, mas não vai para a cena anterior.

Seria bom se os métodos de ações pudessem ser prometidos com base para que você possa encadea-los juntos como

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

ou

Actions.pop().refresh()

@israrhnrtech e @tuneZola não estão funcionando se você quiser chamar a atualização do anterior, então você precisa chamá-lo após o atraso, então ele será chamado corretamente assim

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

Em primeiro lugar, obrigado pela resposta @tuneZola e @washaq .
Ações ('pageOne');
setTimeout (() => {
Actions.refresh ({name: 'zzzzar'});
console.log ("zzzz");
}, 10);

este código está funcionando muito bem ..
obrigado novamente ..

@israrhnrtech não tem problema cara, eu acho que realmente muito hit and trail lol parece simples saber, mas quando você é novo em reagir nativo e não sabe como fazer isso, então é uma história diferente :)

Estou enfrentando esse mesmo problema, nas minhas cenas:

A => B

no BI altero meu estado de armazenamento redux, mas quando faço um Router.pop() , o componentWillReceiveProps não é acionado em A.

Meu router.pop reside localmente dentro da página B (não usando navBar padrão), então

Router.pop()
Router.refresh()

não funciona, definir um tempo limite também não funciona. Alguma ideia de como o conseguir fazer?

Eu só irei atualizar quando você passar seus adereços que você deseja alterar, ou seja,

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

neste passo o nome como adereços na minha visão principal, o que significa que se estou usando this.props.name para atualizar o texto, você precisa passar o estado atualizado como adereços na atualização porque é assim que a visão sabe que está atualizada.
Espero que isso te ajude

Para mim, aplicar isso funcionou:
navigator.replacePreviousAndPop (previousRoute);

@phpscrpt , você pode resumir mais alguns códigos sobre como está funcionando?

@israrhnrtech desculpe, é para o componente Navigator embutido do

@washaq A solução de tempo limite, conforme implementada a seguir, não está funcionando para mim:

backAndRefresh () {

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

}

VOLTE E ATUALIZE

O componentDidMount na página que desejo atualizar não está sendo chamado.

Estou esquecendo de algo?

Obrigado!

@ivansifrim você encontrou uma solução para isso?
também estamos tentando encontrar uma maneira de desencadear uma ação depois de pousar na tela

Isso funciona para mim: Actions.pop ({atualizar: {}});
Ele abre a tela atual e atualiza a tela principal.

@JeroenNelen - Ainda não, mas vou tentar o que @Bertjuhh sugeriu

Alguma solução para o problema mencionado?

Isso está funcionando bem para mim:

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

Em um aplicativo simples que fiz recentemente, trabalhei assim (este código está no arquivo do meu roteador acima da exportação):

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

Você terá que fazer alguma lógica condicional na função que está usando para substituir pop . Funcionou lindamente no meu caso (dado que não me importo com a transição de volta alternativa ao usar ActionConst.RESET ). Rápido e desagradável.

Finalmente alguma coisa está funcionando bem aqui? Nenhuma das proposições acima está realmente funcionando ...

+1

@ivansifirm deve estar funcionando da última vez que o usei lembro na atualização dos adereços que você deseja remover de data Ie acima de 'nome' são os adereços que eu quero atualizar na minha visão anterior

mesmo problema aqui, muito estranho.
às vezes funciona, às vezes não funciona.

Aqui está meu código. (No meu caso, existem as cenas A e B, A => B por navegação, B => A por poping)

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

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

O que há de errado comigo?
Obrigado.

NavigationActions.pop ({atualizar: {teste: true}})

você pode mudar para

NavigationActions.pop ({atualizar: {teste:! Teste}})

Na terça - feira, 20 de junho de 2017 às 19h29, MobileStar
escreveu:

mesmo problema aqui, muito estranho.
às vezes funciona, às vezes não funciona.

Aqui está meu código. (No meu caso, existem as cenas A e B, A => B ao navegar,
B => A por poping)

Cena A:

componentWillReceiveProps (nextProps) {
if (this.props.test! == nextProps.test) {
this._getUser () // Eu preciso chamar esta função após o pop
}
}

Cena B

NavigationActions.pop ({atualizar: {teste: true}})

O que há de errado comigo?
Obrigado.

-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment-309945049 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AExqB3CZM4U1yuwKslfuBj88uVVJulGtks5sGIAbgaJpZM4H_0pN
.

@nikitph Obrigado pela sua ajuda.
Sim, eu tentei com isso.
Mas componentWillReceiveProps nem sempre dispara após pop.
Você poderia me informar quando o componentWillReceiveProps for disparado ou se uma outra função do ciclo de vida for disparada após o pop?
Cumprimentos.

@SelfnessAid ahh agora me lembro porque desisti de resolver esse problema. Eu tive um problema parecido. "Mas componentWillReceiveProps nem sempre dispara depois de estourar." Acho que resolvi isso fazendo com que o índice de uma visão deslizante que tenho na página de destino direcione a atualização. sim, é uma merda, mas estou resolvendo o meu problema.

Eu descobri algo. Eu realmente não acho que seja limpo, mas para mim faz o trabalho, então aqui está. (Estou usando o Redux para fazer isso)

Eu precisava chamar uma função fetch sempre que fizesse Action.scene() ou Action.pop() . Esta busca foi inicialmente chamada no método componentWillMount, mas como não é chamada ao usar Action.pop() , mudei todas as minhas Action.scene() e Action.pop() chamadas para 2 funções personalizadas que são ações que significa que tenho mais contêineres redux do que normalmente deveria, mas eh: /. Então aqui estão eles:

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()`
   }
);

E é assim que mapSceneToAction () se parece:

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

É um pouco complicado, pesado e provavelmente não muito limpo, mas como estou usando esse método, consegui consertar todos os problemas que tive.

Passe um suporte de função para a próxima cena.
Actions.YourRoute ({onPress: () => setState ..});

Então, na próxima cena, chame a função prop
this.props.onPress ();

@ bethuel11 Isso está renderizando novamente o componente em um loop. Embora não seja uma boa solução

eu encontrei um truque simples ...

estado atual / página atual =>

Actions.pop ();
setTimeout (() => {
Actions.refresh ({
isRefresh: true,
});
}, 0);

estado / página permeável => dentro da renderização, adicione a condição abaixo,

if (this.props.isRefresh) {
Actions.refresh ({
isRefresh: false,
});
// se você chamar set state aqui, ele se renderá novamente automaticamente ...
this.setState ({isloading: true});

Obrigado.
}