1.我覺得比較好的方法莽使,因?yàn)閕OS完美的實(shí)現(xiàn)登錄頁是一種presentview的感覺,但是Android那邊就沒有效果了薄腻,都是push動(dòng)畫编振,代碼參考識(shí)兔
下面貼一部分代碼吧
const IOS_MODAL_ROUTES = ['Login'];
const dynamicModalTransition = (transitionProps, prevTransitionProps) => {
const isModal = IOS_MODAL_ROUTES.some(
screenName =>
screenName === transitionProps.scene.route.routeName ||
(prevTransitionProps && screenName === prevTransitionProps.scene.route.routeName)
);
return StackViewTransitionConfigs.defaultTransitionConfig(transitionProps, prevTransitionProps, isModal);
};
const AppNavigator = createStackNavigator(
{
Main: { screen: HomeNavigator },
...Pages,
},
{
headerMode: 'none',
transitionConfig: Platform.OS === 'ios' ? dynamicModalTransition : StackViewStyleInterpolator.forHorizontal,
}
);
這個(gè)效果,我覺得挺好的啊工碾。潮针。。奈何我不是領(lǐng)導(dǎo)倚喂,非要Android和iOS動(dòng)畫保持一致....兩個(gè)不同的系統(tǒng)好嗎C颗瘛!端圈!非要一致直接H5 啊....
下面是我找了好久的焦读,勉強(qiáng)實(shí)現(xiàn)了動(dòng)畫一致,但是我覺得挺難看的舱权,but矗晃,領(lǐng)導(dǎo)覺得還可以...就寫下來記錄一下(也是搜了好多資料),這邊的注釋也要仔細(xì)看下哦宴倍,不然你可能看不明白我在寫什么
//Settings.js
//比如在設(shè)置頁面要特殊彈出登錄頁张症,那就在設(shè)置頁面要彈出登錄頁的方法里面寫
gotoLogin = () => {
NavigationService.navigate('Login', { //NavigationService是自己封裝了一下的,
transition: 'myCustomTransition' //也就是到下個(gè)頁面的時(shí)候傳參
})
}
在router.js中鸵贬,這邊其實(shí)也就是不是 modal 動(dòng)畫俗他,就是一個(gè)單純的從下往上,但是他之前那個(gè)頁面會(huì)往左滑一下阔逼,左滑一下啊兆衅,什么鬼 ,丑的一**
const AppNavigator = createStackNavigator(
{
Main: { screen: HomeNavigator },
...Pages,
},
{
headerMode: 'none',
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const { scene } = sceneProps
const {route} = scene;
const params = route.params || {};
const transition = params.transition || 'default';
return {default: StackViewStyleInterpolator.forHorizontal(sceneProps),
myCustomTransition: StackViewStyleInterpolator.forVertical(sceneProps)
}[transition];
},
})
}
);