如何在StackNavigator中更改动画的方向?
当用户转到另一个屏幕时,屏幕会从从下到上飞行。
当用户转到另一个屏幕时,屏幕从从右到左飞行。 (像Facebook或Instagram!)
export default StackNavigator ({
Main: {
screen: MainScreen,
},
...
}, {
navigationOptions: ({navigation, screenProps}) => ({
tabBarOnPress: blahblaj
}),
lazy: true
// I guess we can do something here
});
提前致谢,
答案 0 :(得分:42)
对于React Navigation 5.0 来说,这种方法似乎有用:
import {
CardStyleInterpolators,
createStackNavigator,
} from '@react-navigation/stack';
const Stack = createStackNavigator();
export default () => (
<Stack.Navigator
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
}}
>
<Stack.Screen name="Screen 1" component={ScreenComponent1} />
<Stack.Screen name="Screen 2" component={ScreenComponent2} />
</Stack.Navigator>
);
此处有更多信息:https://reactnavigation.org/docs/stack-navigator/#pre-made-configs
答案 1 :(得分:6)
在iOS上它是标准行为。 Android需要一些配置。您可以使用两个选项来设置屏幕转换:mode
和transitionConfig
。在这种情况下,transitionConfig
将起作用:
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
// this path can be different depending on react-navigation version, this one is for @1.0.0-beta.15
export default StackNavigator ({
Main: {
screen: MainScreen,
},
...
}, {
transitionConfig: () => ({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
}),
})
我们使用来自反应导航源的CardStackStyleInterpolator
,但您可以根据需要提供自定义转换,以下是one或here或this article。< / p>
mode
更多是默认行为:
export default StackNavigator ({
Main: {
screen: MainScreen,
},
...
}, {
mode: 'card',
navigationOptions: ({navigation, screenProps}) => ({
tabBarOnPress: blahblaj
}),
lazy: true
});
mode
只能有两个值:
card
- 使用标准iOS(从右到左)和Android(从底部到
顶部)屏幕转换。这是默认设置。
modal
- 让屏幕从底部滑入,这是常见的
iOS模式。仅适用于iOS,对Android没有影响。
答案 2 :(得分:2)
在这里,我只是发布我的答案,以便您可以更改动画的方向!就这样!您接受的答案只是默认!
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
export default StackNavigator ({
Main: {
screen: MainScreen,
},
...
}, {
transitionConfig: () => ({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
}),
});
通过这种方式,屏幕转换将在两个平台上从右到左!
你需要多注意的是你可以使用transitionConfig
道具设置任何你想要的屏幕过渡!
答案 3 :(得分:1)
更新的答案:
import ReactNavigation from "react-navigation";
createStackNavigator({...},{
transitionConfig: () =>
ReactNavigation.StackViewTransitionConfigs.SlideFromRightIOS
})
答案 4 :(得分:0)
解决方案非常简单。在React Navigation 4.x中,您可以这样做
import { createAppContainer } from 'react-navigation' import { createStackNavigator, StackViewTransitionConfigs } from 'react-navigation-stack'; const Navigation = createStackNavigator({ screenA: ComponentA, screenB: ComponentB, }, { mode: 'card', transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS, } export const AppNavigation = createAppContainer(Navigation)
注意:您也可以在以前的react导航版本中实现这种过渡,但是必须更改import