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

Posted 2023-04-13

【中文标题】react native - 改变导航方向（即从右到左）

【英文标题】：react native - change navigation direction (i.e, from right to left)

【发布时间】：2019-02-06 00:31:21

【问题描述】：

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

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

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

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

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

【参考方案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://github.com/react-navigation/stack/issues/377#issuecomment-578504696

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