react-native - 如何通过滑动来导航堆栈导航器？

Question

在堆栈导航器。

我不想嵌套底部/顶部导航器来执行此操作。我能够将 transitionConfig 道具配置为类似的动画，但动画被触发并且不响应手势（缓慢滑动使其缓慢显示下一个屏幕等。）它只有在您滑动返回时才能完美运行，但是不要导航到新屏幕。

PS我想使用堆栈导航器来执行此操作，而不是可滚动视图或类似的东西

export default createStackNavigator({
  bottomNavigator,
  Profile: Profile,
  tempScreen: TempScreen
}, {
    transitionConfig: (prop) => NavigationConfig(prop)
  })

这是 NavigationConfig 返回的动画

const trackFromRightToLeft = {
    transitionSpec: {
        duration: 350
    },
    screenInterpolator: sceneProps => {
        const { position, layout, scene } = sceneProps
        const thisSceneIndex = scene.index
        const width = layout.initWidth

        const translateX = position.interpolate({
            inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
            outputRange: [width, 0, -width]
        })

        const slideFromRight = { transform: [{ translateX }] }

        return slideFromRight
    },
}

标签： react-nativereact-navigationstack-navigator

Answer 1

您可以使用 react-native-gesture-handler中的寻呼机，但不完全是您想要的，但通过一些逻辑您可以实现它