在React原生中更改导航动画方向?

zwghvu4y  于 2022-12-27  发布在  React
关注(0)|答案(2)|浏览(137)

我目前正在开发一个用react-native编写的移动的应用程序,这个项目有很多不同的屏幕,所有的屏幕都是用createStackNavigator配置的。
我需要能够改变动画方向的飞行。我可以导航到同一页的不同部分的应用程序,但需要不同的动画。(动画我的意思是方向,当前屏幕退出视图)

我知道,当定义选项以设置导航方向时,可以将其传递到屏幕。遗憾的是,这对我没有任何用处,因为动画可能会在页面之间发生变化。

来自我的项目的示例屏幕声明(名称已清理):

<NavigationContainer ref={navigationRef}>
  <Stack.Navigator initialRouteName={initialRoute}>
     <Stack.Screen name="screen1" component={screen1} options={{headerShown: false, gestureEnabled: false}} />
     <Stack.Screen name="screen2" component={screen2} options={{headerShown: false, gestureEnabled: false}} />
     <Stack.Screen name="screen3" component={screen3} options={{headerShown: false, gestureEnabled: false}} />
     <Stack.Screen name="screen4" component={screen4} options={{headerShown: false, gestureEnabled: false}} />
  </Stack.Navigator>
</NavigationContainer>

导航重置示例:

navigation.reset({
    index: 0,
    routes: [{ name: "screen1", params: { param1: 'paramStrData' } }]
  });

示例导航替换:

navigation.replace('screen2', { param1: 'param1StrData'})

理想情况下,我希望能够将导航动画方向传递给替换或重置函数。
这可能吗?
再次提前感谢。

mftmpeh8

mftmpeh81#

添加 prop persentation,animationTypeForReplace,像这样的动画。

<Stack.Screen
              name="screen1"
              component={screen1}
              options={{
              headerShown: false,
              presentation: 'modal',
              animationTypeForReplace: 'push',
              animation:'slide_from_right'
            }}
            />
qacovj5a

qacovj5a2#

传递动画、演示文稿和animationTypeForReplace props inside选项
例子。

<Stack.Screen
          name="screen"
          component={screen}
          options={{
          headerShown: false,
          presentation: 'modal',
          animationTypeForReplace: 'push',
          animation:'slide_from_right'
        }}
        />

相关问题