React-native-router-flux: Paksa render ulang adegan setelah pop

Terima kasih atas jawaban Anda tetapi, tidak berhasil;)
Itu tidak menyegarkan tampilan sebelumnya ...

Saya kira itu harus menyegarkannya jika ada sesuatu yang diubah dalam statusnya. Jadi tetapkan beberapa nilai acak dalam penyegaran

Pada 09 Apr 2016, pukul 09:51, rtrompier [email protected] menulis:

Terima kasih atas jawaban Anda tetapi, tidak berhasil;)
Itu tidak menyegarkan tampilan sebelumnya ...

—
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung atau lihat di GitHub https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment -207737400

Adakah yang bisa memberi tahu saya cara menyegarkan setelah Actions.pop()?

Sekali lagi, Anda harus mengubah status komponen sebelumnya untuk di-refresh. Begitulah cara kerja NavigationExperimental API.

@aksonov Saya mengalami masalah yang sama dengan @helloworld123456 dan @rtrompier . Alur navigasi saya terlihat sebagai berikut:

Adegan A => Adegan B => Adegan C

Ketika saya pop dari C ke B, saya perlu merender Scene B. Saya melihat bahwa @Elyx0 telah menyarankan menggunakan Actions.pop(); Actions.refresh(); Saya punya dua pertanyaan:

1. Akankah memanggil Actions.refresh() merender Scene C atau B?
2. Apakah mungkin untuk mengganti pengendali onPress dari tombol kembali di navbar? Sepertinya tidak mungkin setelah melihat kodenya.

1. Seharusnya menyegarkan B, tetapi mengapa Anda tidak mengujinya dan mencari tahu!
2. Gunakan renderBackButton untuk memasukkan tombol kembali Anda sendiri, onPress khusus, dan semuanya.

Mengerti - terima kasih @cridenour

@samdturner dapatkah Anda memberi tahu saya caranya?

Terima kasih

@alfan2305

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

bagaimana dengan dalam navBar ? Bukankah seharusnya kita memiliki refresh=true pada Scene . Kalau tidak, saya harus mengganti onPress untuk backButton ke fungsi yang memanggil dua panggilan di atas.

@ssomnoremac Apa yang salah dengan mengganti tombol? Cukup sederhana untuk dilakukan. Jika masalah ini lebih populer, saya akan mengatakan kami menambahkan fungsionalitas tetapi tampaknya ini adalah kasus tepi.

@cridenour Saya percaya itu melampaui cakupan pertanyaan ini untuk memiliki kemampuan untuk merender ulang adegan pada perubahan rute. Dalam kasus saya, saya ingin kembali dari urutan pendaftaran dan mengatur ulang status pendaftaran di toko Redux saya dengan menembakkan tindakan pada render ulang alih-alih mengaitkan reset ke tombol kembali. Apakah ada cara yang lebih baik untuk mencapai ini?

Saya pikir komponen registrasi Anda akan menerima perubahan dengan mendengarkan redux bukan? Atau apakah masalah adegan tidak dirender ulang setelah menerima alat peraga baru ketika komponen lain berada di atas?

Maksud saya, kami menyediakan onBack jadi ketika mendefinisikan adegan pendaftaran harus sesederhana

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

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

terima kasih, tidak tahu tentang onBack karena saya menggunakan DetailContoh sebagai dokumen saya.

Tidak masalah. Lihat sekilas melalui https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md karena ada banyak fleksibilitas di sana ketika Anda "di luar buku" :)

Hallo teman-teman,
Pertama-tama: terima kasih atas wawasan Anda, mereka sangat berguna karena saya cukup pemula dalam pengkodean reaksi & javascript.

Saya baru saja mencoba solusi "refreshOnBack" dari @cridenour : sayangnya saya menemukan beberapa kesulitan.

Sekarang tombolnya tidak melakukan apa-apa. Saya hanya tinggal di Scene "C" saya (mengacu pada contoh @ssomnoremac ) bahkan jika tombolnya disorot sendiri. Jika saya hanya mengatur:
const refreshOnBack = () => { Actions.pop(); }
Saya memiliki perilaku yang diharapkan tanpa pembaruan tampilan orang tua saya.

Apa yang saya lewatkan? :/

Saya memiliki hasil yang sama dengan @Brokray

Jika Anda melakukan debug dari jarak jauh, apakah Anda melihat kesalahan di konsol?

@cridenour tidak ada kesalahan di konsol.
Apakah ada yang bisa saya masuk ke konsol untuk mencari tahu apa yang terjadi? Sesuatu dari peredam mungkin?
Peredam masih sedikit misteri bagi saya.

Terima kasih.

Hmm! Mungkin coba lakukan refresh dulu.

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

Terima kasih atas bantuan Anda @cridenour : Saya baru saja mencoba ide Anda tetapi sayangnya tidak berhasil juga. Saya beralih dari C ke B tanpa masalah tetapi "B" tidak berubah.
Tampaknya masalahnya berasal dari metode refresh() : bahkan jika saya meletakkan tombol segarkan pada adegan 'B' (memanggil ke Actions.refresh() ) tidak ada yang terjadi.

@jholton Saya tidak tahu apakah itu dapat membantu Anda tetapi: Saya menemukan cara khusus untuk memperbarui adegan saya:
Saya memiliki peredam untuk setiap adegan (B & C), ketika saya memanggil tindakan POST di 'C', kedua reduksi saya menangkap panggilan, C melakukan apa yang perlu dia lakukan dan B menetapkan variabel status ' perbarui' ke true .
Dengan cara ini, di "ComponentWillReceiveProps" dari B, saya menguji 'update', dan memanggil lagi apa yang saya perlukan untuk menyegarkan adegan.

Jika seseorang memiliki lebih banyak wawasan tentang masalah Actions.refresh() , jangan ragu!
Terima kasih.

@Brokray Menarik karena tidak berhasil - tetapi Anda memiliki solusi yang lebih baik. Saya tidak percaya dalam mencoba menggunakan sistem navigasi untuk melewati status aplikasi - saya selalu berpegang pada toko fluks.

@Brokray jika tidak terlalu merepotkan, dapatkah Anda memberikan contoh? Bagaimana Anda memiliki peredam untuk satu adegan? Saya telah membaca semua dokumentasi, tetapi saat ini saya agak bingung.

@cridenour Ya, saya tidak ingin melewati status aplikasi itu sendiri. Saya hanya ingin adegan B dirender ulang.
Pada adegan B, saya menampilkan beberapa data dari database. Di adegan C, saya memiliki formulir yang menambahkan data ke database. Ketika pengguna muncul kembali ke adegan B, saya hanya ingin semua metode siklus hidup (misalnya getInitialState, componentWillMount, dll) diaktifkan sehingga data yang baru ditambahkan diambil dan ditampilkan. Metode siklus hidup itu tidak menyala.

@jholton Benar, dan itu adalah desain dari Bereaksi, baik atau buruk. Saya sangat menyarankan Anda mencoba implementasi fluks (banyak orang menyukai redux, saya pribadi menggunakan Alt) dan mengelola data di sana. Dengan begitu, saat Anda memperbarui data, komponen akan dirender ulang (ini berarti menjalankan kembali render() ) dan tidak bergantung pada inisialisasi komponen. Banyak masalah reaksi di React menjadi lebih mudah setelah Anda memindahkan lapisan data dari komponen (dan mereka hanya membaca data dan tampilan).

Yang mengatakan, Actions.refresh() hanya akan menyebabkan props baru dan rendering ulang (sekali lagi, hanya render() ) tetapi tidak akan memanggil componentWillMount, dll.

@jholton Yah, seperti yang dikatakan @cridenour , saya menggunakan implementasi fluks (redux memang) yang memungkinkan Anda mengelola data Anda melalui tindakan, status, dan peredam. Setelah Anda terbiasa dengan implementasi fluks, saya akan dengan senang hati memberi Anda sebuah contoh!
@cridenour Terima kasih lagi atas bantuan Anda!

@Brokray Ya, saya sedang menyelami tutorial Redux sekarang. Saya akan mengunjungi kembali utas ini ketika saya dapat mendiskusikan fluks/redux dengan lebih cerdas. Terima kasih.

apakah saya akan berhasil dalam alat peraga yang diperbarui tetapi ketika saya mencoba untuk pindah ke tampilan berikutnya lagi maka itu memberi saya kesalahan
kode ini ditulis di layar pengaturan saya
Tindakan.pop();
Actions.refresh({key: 'pageOne', nama:'wwwwww'});

Hanya ini yang akan berfungsi dan memperbarui tampilan tetapi ketika saya mencoba kembali ke layar pengaturan maka itu memberi saya kesalahan

akankah saya akhirnya menyelesaikannya dengan memanggil penyegaran kosong dengan alat peraga setelah penundaan?
Actions.popTo('pageOne');
setTimeout(() => {
Actions.refresh({nama:'zzzzar'});
console.log("zzzz");
}, 10);

@washaq : Itu berhasil bagi saya

@ronyv89 glade berfungsi untuk Anda, https://github.com/facebook/react-native/issues/9280 "

Tindakan.pop(); Tindakan.segarkan();
hanya menyegarkan halaman tetapi tidak pergi ke adegan sebelumnya.

Akan lebih baik jika metode Tindakan dapat dijanjikan berdasarkan sehingga Anda dapat menyatukannya seperti

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

atau

Actions.pop().refresh()

@israrhnrtech dan @tuneZola tidak berfungsi jika Anda ingin memanggil penyegaran sebelumnya maka Anda perlu memanggilnya setelah penundaan maka itu akan dipanggil dengan benar seperti itu

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

Pertama-tama Terima kasih atas Balasan @tuneZola dan @washaq .
Tindakan('halamanSatu');
setTimeout(() => {
Actions.refresh({nama:'zzzzar'});
console.log("zzzz");
}, 10);

kode ini bekerja dengan sangat baik..
Terima kasih lagi ..

@israrhnrtech tidak masalah

Saya menghadapi masalah yang sama, di Adegan saya:

A => B

pada BI ubah status toko redux saya, tetapi ketika saya melakukan Router.pop() , componentWillReceiveProps tidak dipicu pada A.

Router.pop saya hidup secara lokal di dalam halaman B (tidak menggunakan navBar default), jadi

Router.pop()
Router.refresh()

tidak berfungsi, mengatur batas waktu juga tidak berfungsi, ada ide tentang cara mencapai ini?

saya hanya akan memperbarui ketika Anda melewati alat peraga yang ingin Anda ubah yaitu

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

dalam hal ini saya memberikan nama sebagai alat peraga di tampilan utama saya itu berarti jika saya menggunakan this.props.name untuk memperbarui teks maka diperbarui, Anda harus melewati status yang diperbarui sebagai alat peraga dalam penyegaran karena itulah cara tampilan mengetahui pembaruannya.
Semoga ini akan membantu Anda

Bagi saya menerapkan ini berhasil:
navigator.replacePreviousAndPop(sebelumnyaRoute);

@phpscrpt , dapatkah Anda menjelaskan lebih lanjut dengan beberapa kode yang cara kerjanya?

@israrhnrtech maaf ini untuk komponen Navigator

@washaq Solusi batas waktu, seperti yang diterapkan di bawah ini, tidak berfungsi untuk saya:

kembaliDanSegarkan(){

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

}

KEMBALI DAN SEGARKAN

componentDidMount pada halaman yang ingin saya segarkan tidak dipanggil.

Apakah saya melewatkan sesuatu?

Terima kasih!

@ivansifrim apakah Anda menemukan solusi untuk ini?
kami juga mencoba menemukan cara untuk memicu tindakan setelah mendarat di layar

Ini berfungsi untuk saya: Actions.pop({ refresh: {} });
Ini memunculkan layar saat ini dan menyegarkan layar induk.

@JeroenNelen - Saya belum tetapi saya akan mencoba apa yang disarankan @Bertjuhh

Adakah solusi untuk masalah yang disebutkan?

Ini bekerja dengan baik untuk saya:

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

Dalam aplikasi sederhana yang baru-baru ini saya lakukan, saya telah mengatasi ini seperti ini (kode ini ada di file router saya di atas ekspor):

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

Anda harus melakukan logika kondisional dalam fungsi yang Anda gunakan untuk menimpa pop . Bekerja dengan baik dalam kasus saya (memang saya tidak keberatan dengan transisi kembali alternatif saat menggunakan ActionConst.RESET ). Cepat n jahat.

Apakah akhirnya ada sesuatu yang bekerja dengan baik di sini? Tak satu pun dari proposisi di atas yang benar-benar berfungsi ...

+1

@ivansifirm itu harus berfungsi terakhir saya menggunakannya ingat dalam penyegaran melewati alat peraga yang ingin Anda batalkan Yaitu di atas 'nama' adalah alat peraga yang saya ingin Anda perbarui dalam tampilan saya sebelumnya

masalah yang sama di sini, sangat aneh.
terkadang berhasil, terkadang tidak berhasil.

Ini kode saya. (Dalam kasus saya, ada adegan A dan B, A=>B dengan menavigasi, B=>A dengan poping)

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

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

Apa yang salah dengan saya ?
Terima kasih.

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

dapatkah kamu mengubahnya menjadi

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

Pada Tue, Jun 20, 2017 at 07:29, MobileStar [email protected]
menulis:

masalah yang sama di sini, sangat aneh.
terkadang berhasil, terkadang tidak berhasil.

Ini kode saya. (Dalam kasus saya, ada adegan A dan B, A=>B dengan menavigasi,
B => A dengan muncul)

Adegan A:

componentWillReceiveProps(nextProps) {
if (this.props.test !== nextProps.test) {
this._getUser() // Saya perlu memanggil fungsi ini setelah pop
}
}

Adegan B

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

Apa yang salah dengan saya ?
Terima kasih.

—
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment-309945049 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AExqB3CZM4U1yuwKslfuBj88uVVJulGtks5sGIAbgaJpZM4H_0pN
.

@nikitph Terima kasih atas bantuan Anda.
Ya, saya mencoba dengan itu.
Tetapi componentWillReceiveProps tidak selalu menyala setelah pop.
Bisakah Anda memberi tahu saya ketika componentWillReceiveProps dipecat atau ada fungsi siklus hidup lain yang diaktifkan setelah pop ?
Salam.

@SelfnessAid ahh sekarang saya ingat mengapa saya menyerah untuk menyelesaikan masalah ini. saya punya masalah serupa. "Tapi componentWillReceiveProps tidak selalu menyala setelah pop." Saya pikir saya telah mengatasinya dengan memiliki indeks tampilan yang dapat digesek yang saya miliki di halaman target mendorong penyegaran. ya itu menyebalkan tapi saya menyelesaikan masalah saya.

Saya menemukan sesuatu. Saya tidak benar-benar berpikir itu bersih sama sekali tetapi bagi saya itu berhasil, jadi ini dia. (Saya menggunakan Redux untuk melakukan ini)

Saya perlu memanggil fungsi fetch setiap kali saya melakukan Action.scene() atau Action.pop() . Pengambilan ini awalnya dipanggil dalam metode componentWillMount tetapi karena tidak dipanggil saat menggunakan Action.pop() Saya mengubah semua panggilan Action.scene() dan Action.pop() ke 2 fungsi khusus yang merupakan tindakan yang berarti saya memiliki lebih banyak wadah redux daripada biasanya, tetapi eh :/. Jadi inilah mereka:

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

Dan inilah tampilan 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:
  }
};

Ini agak rumit, berat dan mungkin tidak terlalu bersih, tetapi karena saya menggunakan metode ini, saya telah berhasil memperbaiki semua masalah yang saya miliki.

Lewati prop fungsi ke adegan berikutnya..
Actions.YourRoute({ onPress: () => setState.. });

Kemudian pada adegan berikutnya, panggil fungsi prop
this.props.onPress();

@bethuel11 Ini merender ulang komponen dalam satu lingkaran. Bukan solusi yang baik

saya menemukan trik sederhana...

keadaan saat ini / halaman saat ini =>

Tindakan.pop();
setTimeout(() => {
Tindakan.segarkan({
isRefresh: benar,
});
}, 0);

keadaan / halaman sebelumnya => di dalam render tambahkan kondisi di bawah ini,

if(this.props.isRefresh){
Tindakan.segarkan({
isRefresh: salah,
});
// jika Anda memanggil set state di sini, ia akan secara otomatis merender sendiri...
this.setState({isloading:true});

Terima kasih.
}