React-native-router-flux: Animasi untuk transisi di Android

@aksonov @Blapi ada update tentang ini?

@Blapi Silakan periksa animasi 'Modal' khusus dari Contoh dengan penggunaan screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid . Anda mungkin menemukan interpolator layar lain dari navigasi reaksi atau Anda dapat membuatnya sendiri. Mungkin Anda dapat meningkatkan dokumen setelah Anda mengetahuinya.

Akan memeriksa ini segera, terima kasih atas balasan Anda!

Juga PR tentang melewati interpolator khusus ini untuk prop 'horizontal' (sintaks v3) dapat membantu.

BTW, apakah mungkin saat ini mendorong layar baru untuk menumpuk navigator tanpa transisi animasi apa pun, seperti yang dilakukan reset ?

Sejauh ini, saya berhasil mengubah transisi navigasi menggunakan ini:

` transisiConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal })}

`

Tapi saya masih tidak dapat memberikan transisiConfig khusus untuk setiap adegan yang saya miliki, transisiConfig adalah sama untuk semua adegan yang saya miliki, masih bekerja untuk mencari tahu bagaimana saya bisa memiliki TransitionConfig khusus untuk sebuah adegan. Bagaimanapun, Anda setidaknya dapat memiliki TransitionConfig yang berbeda di aplikasi Anda dengan memberikan prop ini ke root Scene/Stack/whateverYouHave

@todorone , pada Adegan/Stack root Anda, tambahkan transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forInitial })} , Anda tidak akan memiliki transisi animasi dengan ini!

Perhatikan bahwa itu akan diterapkan untuk semua adegan Anda, saya belum berhasil memiliki transisi animasi khusus untuk adegan tertentu

@Blapi
Terima kasih atas petunjuknya, saya juga sudah mengetahuinya. Saya juga menemukan bahwa menambahkan duration={0} sebagai prop, kami juga menonaktifkan transisi. Tetapi mencari tahu bagaimana mengontrol transisi tertentu benar-benar diperlukan ...

Sepertinya itu adalah batasan jika bereaksi perpustakaan navigasi, jadi silakan minta di sana.

7 bulan. 2017 ., 11:04, Todor1 [email protected] аписал(а):

@Blapi
Terima kasih atas petunjuknya, saya juga sudah mengetahuinya. Saya juga menemukan bahwa menambahkan durasi={0} sebagai prop, kami juga menonaktifkan transisi. Tetapi mencari tahu bagaimana mengontrol transisi tertentu benar-benar diperlukan ...

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub, atau matikan utasnya.

Oke keren, saya memeriksa masalah di perpustakaan reaksi-navigasi dan menemukan solusi ini:

          <Stack
            key='root'
            hideNavBar
            transitionConfig={() => ({
              screenInterpolator: (props) => {
                const { scene } = props
                switch (scene.route.routeName) {
                  /* case yourKeyScene:
                  return theAnimationYouWant(props)*/
                  case 'groups':
                    return CardStackStyleInterpolator.forVertical(props)
                  case 'home':
                    return CardStackStyleInterpolator.forHorizontal(props)
                  case 'inbox':
                    return CardStackStyleInterpolator.forFade(props)
                  default:
                    return CardStackStyleInterpolator.forInitial
                }
              }
            })}>

(grup, kotak masuk, dan beranda adalah beberapa kunci dari adegan yang saya miliki)

Jadi ini berfungsi di aplikasi Android saya, tetapi hanya ada hal kecil karena transisi mungkin saling tumpang tindih, saya kira itu hanya hal yang logis dan dapat diselesaikan dengan mudah.

Anda juga dapat mengimplementasikan CardStackStyleInterpolator Anda sendiri seperti yang dikatakan @aksonov sebelumnya, cukup periksa kode di sana https://github.com/react-community/react-navigation/blob/master/src/views/CardStack/CardStackStyleInterpolator.js untuk melihat caranya untuk membuat transisi Anda sendiri.

Logika kode saya mungkin bukan yang terbaik menggunakan sakelar, saya pasti akan mengubahnya tetapi itu hanya sebuah contoh, jadi lakukan apa yang Anda inginkan!

Dan hati-hati, prop transitionConfig yang akan melakukan trik HARUS ADA di key='root' Scene !

@Blapi Bagus, bisakah Anda mengirimkan PR ke dokumen tentang itu? Juga mungkin baik untuk menghasilkan sendiri transitionConfig secara otomatis oleh komponen kita (jika tidak ditentukan untuk root) dan mengembalikan animasi kustom yang ditentukan oleh Scene individual seperti itu switch . PR dipersilahkan.

@aksonov yakin tapi saya tidak punya waktu minggu ini, akan melakukannya minggu depan

@aksonov , terlambat untuk PR ini tetapi pasti akan melakukannya ketika saya punya waktu.

Hai @Blapi , ada pembaruan tentang ini? :)

@MasterDaveh Saya banyak mengerjakan aplikasi saya baru-baru ini karena saya harus menerbitkannya hari ini. Sekarang saya akan memiliki lebih banyak waktu jadi saya pasti akan segera mengurusnya.

Bagi siapa saja yang tersandung ke utas ini - untuk mendapatkan kembali perilaku direction= lama, Anda cukup menambahkan yang berikut ini ke adegan root Anda ... :)

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

...
<Scene
    key="root"
    hideNavBar={true}
    transitionConfig={() => ({
        screenInterpolator: (props) => {
            switch (props.scene.route.params.direction) {
                case 'vertical':
                    return CardStackStyleInterpolator.forVertical(props);
                case 'fade':
                    return CardStackStyleInterpolator.forFade(props);
                case 'none':
                    return CardStackStyleInterpolator.forInitial
                case 'horizontal':
                default:
                    return CardStackStyleInterpolator.forHorizontal(props)
            }
        }
    })}>
    <Scene
        key="JobsSearch"
        component={JobsSearch}
        hideNavBar={true}
        direction="vertical"
        panHandlers={null}
    />
...

</Scene>
...

impor CardStackStyleInterpolator dari 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

Jalan telah diubah sekarang. Gunakan import CardStackStyleInterpolator from "react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator"; di versi terbaru.

Anda menggunakan efek transisi khusus Anda seperti berikut:

import StackViewStyleInterpolator from 'react-navigation-stack';

<Scene
key='main'
hideNavBar
transitionConfig={transitionConfig}
>

...more scenes

</Scene>

const MyTransitionSpec = ({
    duration: 1000,
    // easing: Easing.bezier(0.2833, 0.99, 0.31833, 0.99),
    // timing: Animated.timing,
});

const transitionConfig = () => ({
    transitionSpec: MyTransitionSpec,
    // screenInterpolator: StackViewStyleInterpolator.forFadeFromBottomAndroid,
    screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;
        const width = layout.initWidth;

        //right to left by replacing bottom scene
        // return {
        //     transform: [{
        //         translateX: position.interpolate({
        //             inputRange: [index - 1, index, index + 1],
        //             outputRange: [width, 0, -width],
        //         }),
        //     }]
        // };

        const inputRange = [index - 1, index, index + 1];

        const opacity = position.interpolate({
            inputRange,
            outputRange: ([0, 1, 0]),
        });

        const translateX = position.interpolate({
            inputRange,
            outputRange: ([width, 0, 0]),
        });

        return {
            opacity,
            transform: [
                { translateX }
            ],
        };

        //from center to corners
        // const inputRange = [index - 1, index, index + 1];
        // const opacity = position.interpolate({
        //     inputRange,
        //     outputRange: [0.8, 1, 1],
        // });

        // const scaleY = position.interpolate({
        //     inputRange,
        //     outputRange: ([0.8, 1, 1]),
        // });

        // return {
        //     opacity,
        //     transform: [
        //         { scaleY }
        //     ]
        // };
    }
});

Bagi siapa saja yang tersandung ke utas ini - untuk mendapatkan kembali perilaku direction= lama, Anda cukup menambahkan yang berikut ini ke adegan root Anda ... :)

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

...
<Scene
    key="root"
    hideNavBar={true}
    transitionConfig={() => ({
        screenInterpolator: (props) => {
            switch (props.scene.route.params.direction) {
                case 'vertical':
                    return CardStackStyleInterpolator.forVertical(props);
                case 'fade':
                    return CardStackStyleInterpolator.forFade(props);
                case 'none':
                    return CardStackStyleInterpolator.forInitial
                case 'horizontal':
                default:
                    return CardStackStyleInterpolator.forHorizontal(props)
            }
        }
    })}>
    <Scene
        key="JobsSearch"
        component={JobsSearch}
        hideNavBar={true}
        direction="vertical"
        panHandlers={null}
    />
...

</Scene>
...

Ini bekerja dengan baik! :)
Selain itu, bagaimana kita bisa melakukan animasi terpisah untuk layar masuk dan layar keluar?
Apakah ada bendera di dalam props.scene untuk menentukan apakah itu keluar atau masuk?

Terima kasih

Tidak berfungsi untuk tab. Apakah ada solusi lain?

@ michaelfemi81 Apakah Anda menemukan cara untuk menerapkan di tab?