Navigasi khusus dengan komponen Navigator di React-Native

158

Saya menjelajahi kemungkinan React Native sambil mengembangkan aplikasi demo dengan navigasi khusus antara tampilan dengan bantuan Navigatorkomponen .

Kelas aplikasi utama menjadikan navigator dan renderScenekomponen pengembalian di dalam berlalu:

class App extends React.Component {
    render() {
        return (
            <Navigator
                initialRoute={{name: 'WelcomeView', component: WelcomeView}}
                configureScene={() => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
                renderScene={(route, navigator) => {
                    // count the number of func calls
                    console.log(route, navigator); 

                    if (route.component) {
                        return React.createElement(route.component, { navigator });
                    }
                }}
             />
        );
    }
}

Untuk saat ini aplikasi berisi dua tampilan:

class FeedView extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>
                    Feed View!
                </Text>
            </View>
        );
    }
}

class WelcomeView extends React.Component {
    onPressFeed() {
        this.props.navigator.push({
            name: 'FeedView',
            component: FeedView
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome View!
                </Text>

                <Text onPress={this.onPressFeed.bind(this)}>
                    Go to feed!
                </Text>
            </View>
        );
    }
}

Yang ingin saya cari tahu adalah:

Saya melihat di log bahwa ketika menekan "pergi untuk memberi makan" renderScenedisebut beberapa kali meskipun tampilan membuat dengan benar sekali. Apakah ini cara kerjanya?
```
index.ios.js:57 Object {name: 'WelcomeView', component: function}
index.ios.js:57 Object {name: 'FeedView', component: function}
// renders Feed View
```
Secara umum apakah pendekatan saya sesuai dengan cara Bereaksi, atau dapatkah itu dilakukan dengan lebih baik?

Yang ingin saya capai adalah sesuatu yang mirip NavigatorIOStetapi tanpa bilah navigasi (namun beberapa tampilan akan memiliki bilah navigasi kustom sendiri).

javascript ios navigation reactjs react-native Kosmetika
sumber

1

@ericvicenti contoh ini harus disertakan pada halaman Navigator di dokumen. Ini lebih lengkap dan memberikan gambaran yang lebih baik tentang bagaimana menggunakan komponen Navigator dalam konteks.

greatwitenorth

Hanya mencoba contoh Anda, haruskah adegan berubah secara otomatis ketika dorongan navigator terjadi? Bagi saya contoh Anda tidak pernah menunjukkan Tampilan Umpan! teks, jadi saya bertanya-tanya apakah ada sesuatu yang berubah dengan versi terbaru.

Ian

74

Pendekatan Anda harus bekerja dengan baik. Dalam aplikasi besar di Fb, kami menghindari memanggil require()komponen adegan sebelum kami merendernya, yang dapat menghemat sedikit waktu start-up.

The renderScenefungsi harus dipanggil saat adegan pertama didorong ke Navigator. Ini juga akan dipanggil untuk adegan aktif ketika Navigator di-render ulang. Jika Anda melihat renderScenedipanggil beberapa kali setelah a push, maka itu mungkin bug.

Navigator masih dalam proses, tetapi jika Anda menemukan masalah dengan itu, silakan mengajukan di github dan beri tag saya! (@ericvicenti)

Eric Vicenti
sumber

1

Halo @Eric silakan lihat di tautan ini: - stackoverflow.com/questions/44538306/…

sid

2

Navigatorsudah usang sekarang di RN 0.44.0Anda dapat menggunakan react-native-deprecated-custom-componentsuntuk mendukung aplikasi yang ada yang sedang digunakan Navigator.

Vivek Maru
sumber

1

Seperti yang telah disebutkan sebelumnya, Navigator sudah tidak digunakan lagi sejak v0.44, tetapi masih dapat diimpor untuk mendukung aplikasi yang lebih lama:

Navigator telah dihapus dari paket React Native inti dalam versi 0.44. Modul telah dipindahkan ke paket komponen reaksi-asli-kustom- yang dapat diimpor oleh aplikasi Anda untuk menjaga kompatibilitas mundur.

Untuk melihat dokumen asli untuk Navigator, silakan beralih ke versi dokumen yang lebih lama.

Sesuai dokumen (Bereaksi Asli v0.54) Navigasi Antar Layar . Sekarang disarankan untuk menggunakan Navigasi Bereaksi jika Anda baru memulai, atau NavigatorIOS untuk aplikasi non-Android

Jika Anda baru memulai dengan navigasi, Anda mungkin ingin menggunakan React Navigation . React Navigation menyediakan solusi navigasi yang mudah digunakan, dengan kemampuan untuk menyajikan navigasi stack umum dan pola navigasi tab pada iOS dan Android.

...

Jika Anda hanya menargetkan iOS, Anda mungkin juga ingin melihat NavigatorIOS sebagai cara memberikan tampilan dan nuansa asli dengan konfigurasi minimal, karena ia menyediakan pembungkus di sekitar kelas UINavigationController asli.

NB : Pada saat memberikan jawaban ini, React Native berada di versi 0.54

JSON C11
sumber

0

Komponen navigator sudah usang sekarang. Anda dapat menggunakan react-native-router-flux oleh askonov, ia memiliki variasi yang sangat besar dan mendukung banyak animasi yang berbeda dan efisien

Divye Shah
sumber

Navigasi khusus dengan komponen Navigator di React-Native

Jawaban: