是否可以使用React Navigation在React Native中自定義和默認轉換之間進行切換？

下面是我創造這樣我可以在任何屏幕通過定製轉移的轉移配置：是否可以使用React Navigation在React Native中自定義和默認轉換之間進行切換？

const TransitionConfiguration =() => ({ 
     // Define scene interpolation, eq. custom transition 
    screenInterpolator: (sceneProps) => { 
    const { position, scene } = sceneProps; 
    const { index, route } = scene; 
    const params = route.params || {}; 
    const defaultTransition =() => ({}); 
    const transition = params.transition || defaultTransition; 

    return transition(index, position); 
    }, 
}); 

const navigationOptions = { 
    navigationOptions: { 
    headerStyle: { 
     backgroundColor: background.color4, 
     shadowColor: primary.color2, 
    }, 
    headerTitleStyle: { color: primary.color1 }, 
    }, 
    transitionConfig: TransitionConfiguration, 
};

正如你可以看到，我檢查，如果我通過了過渡的路線PARAM與否。如果它沒有通過，我傳遞一個默認函數返回一個空對象。

如果我不通過轉換配置，是否可以切換回StackNavigator的默認轉換？

來源

2017-10-10 rash.tay

如果檢查TransitionConfigs.js

function getTransitionConfig(

    ... 
    ... 

    if (transitionConfigurer) { 
    return { 
     ...defaultConfig, 
     ...transitionConfigurer(), 
    }; 
    } 
    return defaultConfig;

你可以看到，當你定義您的自定義轉換配置將覆蓋其用於定義過渡transitionSpec and screenInterpolator道具。

在你的情況下，通過定義screenInterpolator這是一個唯一的過渡。如果你想定義許多包括默認的請參考my post here並擴展你的自定義默認的。

意思是，您的screenInterpolator應該檢查是否有params.transition定義，如果沒有回落到默認值之一。

來源

2017-10-10 14:59:10

嘿，我沒有看到默認的過渡。我覺得它默認爲我的轉換，因爲如果轉換配置不通過params傳遞，我發送空對象。 –

@ rash.tay對不起，我的錯誤陳述，我已經更新了答案。 –

嘿，我遵循相同的職位。如果你觀察，你會通過一個默認配置，以防止自定義轉換配置不通過params發送。我不想自己傳遞一個默認配置。我想要回退到堆棧導航器的默認轉換配置。如果我可以通過某種方式知道我是否已通過我的route.params過渡，我可以這樣做。如果route.params.transition未定義，是否可以根本不設置transitionConfig屬性？ –

因此，在挖掘了一下react-navigation的代碼之後，我發現有一個名爲CardStackStyleInterpolator的文件，它提供了執行默認轉換的功能。

我剛剛使用了從該文件導出的功能forHorizontal。我沒有處理所有案件或設備，但我認爲它可以很容易地處理。此外，您不必重複默認情況下的代碼。

下面是摘錄：

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

const TransitionConfiguration =() => ({ 
     // Define scene interpolation, eq. custom transition 
    screenInterpolator: (sceneProps) => { 
    const { position, scene, layout } = sceneProps; 
    const { index, route } = scene; 
    const params = route.params || {}; 
    const transition = params.transition; 

    return transition && typeof transition === 'function' 
      ? transition(index, position, layout) 
      : DefaultTransition.forHorizontal(sceneProps); 
    }, 
});

來源

2017-10-10 17:24:03

是否可以使用React Navigation在React Native中自定義和默認轉換之間進行切換？

回答

相關問題