React-native-router-flux: غير قادر على تغيير "مقياس" تأثير الانتقال بين المشاهد

أهلا،

تمكنت من تخصيص الانتقال عن طريق تغيير الرسوم المتحركة في الملف مباشرةً
رد فعل-أصلي-تجريبي-ملاحة / NavigationCardStackStyleInterpolator.js
لكن هذه ليست ممارسة جيدة على ما أعتقد.
حاولت أيضًا نسخ الوظيفة في ملفي الخاص واستخدام خاصية AnimationStyle ولكن كان هناك خطأ في الانتقال لكنني لا أعرف ما إذا فاتني شيء.

في النهاية ، قد أتفرع من رد الفعل-الأم-التجريب-التجريب واستخدم انتقالي الخاص

لقد فعلت ذلك بسهولة.
فقط أضف خاصية animationStyle إلى <Router/> على النحو التالي:

<RouterWithRedux scenes={scenes} animationStyle={animationStyle}/>

وإنشاء دالة animationStyle تتجاوز القيم المقحمة.

هذا ما أستخدمه حاليًا في مشروعي:

export const animationStyle = (props) => {
    const { layout, position, scene } = props;

    const direction = (scene.navigationState && scene.navigationState.direction) ?
        scene.navigationState.direction : 'horizontal';

    const index = scene.index;
    const inputRange = [index - 1, index, index + 1];
    const width = layout.initWidth;
    const height = layout.initHeight;

    const opacity = position.interpolate({
        inputRange,
        //default: outputRange: [1, 1, 0.3],
        outputRange: [1, 1, 0.5],
    });

    const scale = position.interpolate({
        inputRange,
        //default: outputRange: [1, 1, 0.95],
        outputRange: [1, 1, 1],
    });

    let translateX = 0;
    let translateY = 0;

    switch (direction) {
        case 'horizontal':
            translateX = position.interpolate({
                inputRange,
                //default: outputRange: [width, 0, -10],
                outputRange: [width, 0, 0],
            });
            break;
        case 'vertical':
            translateY = position.interpolate({
                inputRange,
                //default: outputRange: [height, 0, -10],
                outputRange: [height, 0, 0],
            });
            break;
    }

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

ترميز سعيد!

@ redbaron76 عظيم أن يعمل. شكرا.

@ redbaron76 شكرًا ، كان هذا فقط ما احتاجه لمشروعي!

@ redbaron76 مذهل كيف يعمل ذلك بسهولة.

لأي مبتدئ يقرأ ذلك ، RouterWithRedux هو في الأساس:

const RouterWithRedux = connect () (Router) ؛

ثم يمكنك إنشاء المكون كما ذكر. ستضعه في مكان جهاز التوجيه الخاص بك.

@ redbaron76aksonov هذا يعمل بشكل مثالي ويجب بالتأكيد أن يكون جزءًا من المستندات!

أفضل إجابة EVVVAAAA

@ redbaron76 هذا مثالي! ما هو دور تمرير index هنا:

    const index = scene.index
    const inputRange = [index - 1, index, index + 1]

@ redbaron76 يعمل بشكل مثالي ، لكنه ينطبق على الوسائط. كيف يمكنني تعطيل الرسوم المتحركة المشروطة فقط؟