Question

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

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

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

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

导航时可以改变动画方向吗？

Answer 1

在{@ {3}}中，在gestureDirection: 'horizontal-inverted'中使用defaultNavigationOptions/navigationOptions在react-navigation / stack github存储库中

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

下面的相关链接：

satya164

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

Answer 2

您需要在导航配置旁边使用“自定义屏幕过渡”。尝试执行以下代码，（确保导入“易用，从'react-native'动画化”）

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

对于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 4

这对我有用：

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

Answer 5

// 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

上找到了这个解决方案

做出本地反应-更改导航方向（即，从右到左）

5 个答案: