React-native-router-flux: الرسوم المتحركة للانتقال على Android

aksonovBlapi أي تحديث على ذلك؟

Blapi يرجى التحقق من الرسوم المتحركة " screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid . قد تجد محرفًا آخر للشاشة من التنقل التفاعلي أو يمكنك إنشاء واحدة خاصة بك. ربما يمكنك تحسين المستندات بعد اكتشافها.

سوف نتحقق من هذا قريبًا ، شكرًا على ردك!

أيضًا العلاقات العامة حول تمرير هذه المحولات المخصصة للدعم الأفقي (بناء جملة v3) يمكن أن يكون مفيدًا.

راجع للشغل ، هل من الممكن في الوقت الحالي دفع الشاشة الجديدة لتكديس الملاح بدون أي انتقال متحرك ، مثل reset يفعل؟

حتى الآن ، تمكنت من تغيير انتقال التنقل باستخدام هذا:

" ransConfig = {() => ({screenInterpolator: CardStackStyleInterpolator.forHorizontal})}

"

لكنني ما زلت غير قادر على إعطاء شكل انتقالي محدد لكل مشاهد لدي ، فإن أداة الانتقالية هي نفسها بالنسبة لجميع المشاهد التي لدي ، وما زلت أعمل على اكتشاف كيف يمكنني الحصول على تكوين انتقالي معين لمشهد. على أي حال ، يمكنك على الأقل إجراء عملية انتقال مختلفة على التطبيق الخاص بك من خلال إعطاء هذه الخاصية إلى الجذر Scene / Stack / أيا كان لديك

todorone ، على جذر المشهد / المكدس ، أضف transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forInitial })} ، فلن يكون لديك انتقال متحرك مع هذا!

لاحظ أنه سيتم تطبيقه على جميع المشاهد الخاصة بك ، ولم أتمكن من الحصول على انتقال متحرك محدد لمشهد معين

تضمين التغريدة
شكرًا على التلميح ، لقد اكتشفت ذلك أيضًا. لقد اكتشفت أيضًا أن إضافة duration={0} كخاصية ، فإننا نعطل أيضًا الانتقال. لكن معرفة كيفية التحكم في انتقال معين أمر ضروري حقًا ...

يبدو أنه مقيد إذا تفاعلت مكتبة التنقل ، لذا يرجى طلبها هناك.

7 дек. 2017 г.، 11:04، Todor1 [email protected] написал (а):

تضمين التغريدة
شكرًا على التلميح ، لقد اكتشفت ذلك أيضًا. لقد اكتشفت أيضًا أن إضافة المدة = {0} كعنصر خاص ، كما أننا نعطل الانتقال. لكن معرفة كيفية التحكم في انتقال معين أمر ضروري حقًا ...

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بكتم صوت الموضوع.

حسنًا ، لقد تحققت من المشكلات الموجودة في مكتبة رد الفعل والملاحة ووجدت هذا الحل:

          <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
                }
              }
            })}>

(المجموعات ، البريد الوارد والمنزل هي بعض مفاتيح المشاهد التي لدي)

لذا فهو يعمل على تطبيق Android الخاص بي ، ولكن هناك شيء بسيط فقط لأن الانتقالات قد تتداخل مع بعضها البعض ، إنه مجرد شيء منطقي أفعله على ما أعتقد ويمكن حله بسهولة.

يمكنك أيضًا تنفيذ CardStackStyleInterpolator الخاص بك كما قال aksonov من قبل ، فقط تحقق من الكود هناك https://github.com/react-community/react-navigation/blob/master/src/views/CardStack/CardStackStyleInterpolator.js لترى كيف لإنشاء الانتقال الخاص بك.

قد لا يكون منطق الكود الخاص بي هو الأفضل باستخدام مفتاح ، سأقوم بالتأكيد بتغييره ولكنه كان مجرد مثال ، لذا افعل ما يحلو لك!

وكن حذرًا ، فإن الخاصية الرئيسية transitionConfig التي ستؤدي الحيلة يجب أن تكون في مفتاحك = مشهد "الجذر"!

Blapi رائع ، هل يمكنك تقديم العلاقات العامة إلى المستندات حول هذا الموضوع؟ كما قد يكون من الجيد إنشاء ترانسبينج كونفيغ تلقائيًا بواسطة المكون الخاص بنا (إذا لم يتم تعريفه للجذر) وإرجاع الرسوم المتحركة المخصصة المحددة بواسطة مشهد فردي مثل switch . العلاقات العامة موضع ترحيب.

aksonov متأكد ولكن ليس لدي وقت هذا الأسبوع ، سأفعل ذلك الأسبوع المقبل

aksonov ، تأخرت عن هذه العلاقات العامة ولكن سأفعل بالتأكيد عندما يكون لدي الوقت.

يا Blapi ، أي تحديثات على هذا؟ :)

MasterDaveh كنت أعمل كثيرًا على تطبيقي مؤخرًا حيث كان عليّ نشره اليوم. الآن سيكون لدي المزيد من الوقت لذلك سأعتني به بالتأكيد قريبًا.

لأي شخص يتعثر في هذا الموضوع - للحصول على الاتجاه القديم = عودة السلوك ، يمكنك فقط إضافة ما يلي إلى مشهد الجذر الخاص بك ... :)

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>
...

استيراد CardStackStyleInterpolator من "رد فعل التنقل / src / views / CardStack / CardStackStyleInterpolator" ؛

تم تغيير المسار الآن. استخدم import CardStackStyleInterpolator from "react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator"; في الإصدار الأخير.

يمكنك استخدام تأثيرات الانتقال المخصصة الخاصة بك مثل ما يلي:

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 }
        //     ]
        // };
    }
});

لأي شخص يتعثر في هذا الموضوع - للحصول على الاتجاه القديم = عودة السلوك ، يمكنك فقط إضافة ما يلي إلى مشهد الجذر الخاص بك ... :)

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>
...

هذا يعمل بشكل جيد! :)
علاوة على ذلك ، كيف يمكننا عمل رسوم متحركة منفصلة لشاشة الدخول والخروج؟
هل يوجد أي علم داخل props.scene لتحديد ما إذا كان الخروج أم الدخول؟

شكرا

لا يعمل لعلامات التبويب. هل هناك أي حل آخر؟

@ michaelfemi81 هل وجدت أي طريقة للتنفيذ في علامات التبويب؟