【问题标题】:React Navigation: Force screen to animate from left to rightReact Navigation:强制屏幕从左到右进行动画处理
【发布时间】:2022-07-19 11:53:56
【问题描述】:

使用 React Navigation v6.x 并使用 .navigate() 函数,新视图总是从右到左动画。

通常这很好,但我有几个视图总是想从左侧加载。

我已尝试阅读与转换相关的文档、代码示例和 stackoverflow 线程,但无法收集到任何有用的信息。

谁能给我一些建议?

干杯

【问题讨论】:

    标签: reactjs react-native react-navigation react-navigation-v6


    【解决方案1】:

    首先在下面制作。

     const leftToRightAnimation = {
      cardStyleInterpolator: ({ current, layouts }) => {
        return {
          cardStyle: {
            transform: [
              {
                translateX: current.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [-layouts.screen.width, 0],
                }),
              },
            ],
          },
        };
      },
    };
    

    基本上它所做的只是将屏幕从全屏宽度的 x 方向向左移动以适应屏幕。隐含的进步是从 0 到 1。

    然后把它放到你想要应用过渡的屏幕中。

    <NavigationContainer>
          <Root.Navigator headerMode="none" initialRouteName="Home">
            <Root.Screen name="Home" component={Home} />
            <Root.Screen name="NotModal" component={NotModal} options={leftToRightAnimation} />
          </Root.Navigator>
     </NavigationContainer>
    

    【讨论】:

    • 不幸的是,这对我不起作用。当我执行 .navigate(); 时,似乎 cardStyleInterpolator 函数甚至没有被调用
    【解决方案2】:

    设置选项

    动画:'slide_from_right'

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-06-29
      • 1970-01-01
      • 2019-04-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多