react native - 改变导航方向（即从右到左）答案

【问题标题】：react native - change navigation direction (i.e, from right to left)react native - 改变导航方向（即从右到左）
【发布时间】：2019-02-06 00:31:21
【问题描述】：

我正在使用 react-navigation 从一个屏幕导航到另一个屏幕。顺便说一句，我使用的是createStackNavigator。

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

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

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

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

【问题讨论】：

标签： react-native navigation react-navigation

【解决方案1】：

您需要在导航配置中使用自定义屏幕转换。试试下面的代码，（确保导入 Easing, Animated from '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}]};
            },
    })
  }
);

【讨论】：

真的没有简单的方法来设置slide from left/right??如果我需要相同的导航在不同的地方使用不同的方向动画怎么办？真的讨厌对原生导航做出反应.. 太可怕了 - 抱歉......需要把它弄出来.. 考虑到所有事情，你的答案是最好的 - 谢谢
你是如何处理滑动手势的？？

【解决方案2】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

对我来说，这与"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>
)}

【讨论】：

【解决方案5】：

这对我有用：

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

【讨论】：

【解决方案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找到了这个解决方案

【讨论】：