更改导航方向(即从右到左)

Question

我正在使用反应导航从一个屏幕导航到另一个屏幕。 顺便说一下，我正在使用createStackNavigator.

我正在使用下面的代码在屏幕之间导航。

<Button onPress={()=>this.props.navigation.navigate('ScreenTwo')}>button-></Button>

它工作正常，但我想改变动画方向。目前，当我按下按钮时，ScreenTwo会弹出，而是希望屏幕从右向左滑动。

导航时是否可以更改动画的方向？

Answer 1

在 react-navigation/stack github 存储库中使用gestureDirection: 'horizontal-inverted'在 react-navigation/stack github 存储库中由 satya164 回答，在defaultNavigationOptions/navigationOptions中使用

Screen: {
screen: Screen,
navigationOptions: {
...TransitionPresets.SlideFromRightIOS,
gestureDirection: 'horizontal-inverted',
},
},

相关链接如下：

https://github.com/react-navigation/stack/issues/377#issuecomment-578504696

https://reactnavigation.org/docs/stack-navigator/#animation-related-options

Answer 2

您需要在导航配置中使用自定义屏幕过渡。尝试以下代码，(确保从"反应原生"导入缓动，动画(

const yourStack = createStackNavigator(
{
One: ScreenOne,
Two: DetailsTwo,
},
{
initialRouteName: 'One',
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const {layout, position, scene} = sceneProps;
const {index} = scene;
const width = layout.initWidth;
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [width, 0, 0],
});
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1],
});
return {opacity, transform: [{translateX: translateX}]};
},
})
}
);

Answer 3

对我来说，这适用于"react-native": "0.62.2","react-navigation": "4.4.4", "react-navigation-stack": "2.10.4",：

import {createStackNavigator, CardStyleInterpolators} from '@react-navigation/stack';
const RootStack = createStackNavigator();
function Root(props) {
return (
<RootStack.Navigator headerMode="none" mode="modal">
<RootStack.Screen
name="NextScreen"
options={{
gestureDirection: 'horizontal',
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
component={NextScreenComponent}
/>
</RootStack.Navigator>
)}

Answer 4

对于版本 4.x.x -

import {
createStackNavigator,
CardStyleInterpolators,
} from 'react-navigation-stack';
const CatalogStack = createStackNavigator(
{
Catalog: Catalog,
ProductDetails: ProductDetails,
EditProduct: EditProduct,
Categories: Categories,
SubCategories: SubCategories,
ChooseColors: ChooseColors,
ChooseSizes: ChooseSizes,
},
{
defaultNavigationOptions: {
headerShown: false,
gestureEnabled: false,
swipeEnabled: false,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
},
},
);

对于 5.x.x -

import {
createStackNavigator,
CardStyleInterpolators,
} from '@react-navigation/stack';
<HomeStack.Navigator
initialRouteName="Home"
headerMode="none"
screenOptions={{
gestureEnabled: false,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}>
<HomeStack.Screen name="Home" component={Home} />
</HomeStack.Navigator>

Answer 5

这对我有用：

<AppStack.Navigator headerMode="none" initialRouteName="Home">
<AppStack.Screen
name="LeftMenu"
component={LeftMenu}
options={{ gestureDirection: "horizontal-inverted" }}
/>
</AppStack.Navigator>

Answer 6

// some import
import { Animated, Easing } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const forSlide = ({ current, next, inverted, layouts: { screen } }) => {
const progress = Animated.add(
current.progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolate: 'clamp',
}),
next
? next.progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolate: 'clamp',
})
: 0
);
return {
cardStyle: {
transform: [
{
translateX: Animated.multiply(
progress.interpolate({
inputRange: [0, 1, 2],
outputRange: [
screen.width, // Focused, but offscreen in the beginning
0, // Fully focused
screen.width * -0.3, // Fully unfocused
],
extrapolate: 'clamp',
}),
inverted
),
},
],
},
};
};
const config = {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
};
const SettingsNavigation = () => (
<Stack.Navigator screenOptions={{ tabBarVisible: false }}>
<Stack.Screen name="Tags" component={TagsScreen} options={{ headerShown: false, transitionSpec: { open: config, close: config }, cardStyleInterpolator: forSlide}} />            
</Stack.Navigator>
);

我在 https://reactnavigation.org/docs/stack-navigator/#animations 上找到了这个解决方案