React Native 导航中从右到左的屏幕动画

Question

我希望在 React Native 中拥有从右到左的屏幕动画。我在互联网上查了很多，但大多数示例都很旧，它们使用 StackNavigator 的方式不同，配置也不同。我认为他们使用的是旧版本的 React Navigation。我使用的是第 6 版。我也按照文档https://reactnavigation.org/docs/stack-navigator/#animations 中的说明进行了尝试，但没有任何效果。

你能帮忙吗？这是我的代码：

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator(); 

function MainScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="To Read" component={ToReadScreen} />
      <Tab.Screen name="Have Read" component={HaveReadScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="ReadX"
          component={MainScreen}
        />
        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

所以我正在尝试配置主屏幕和设置屏幕之间的屏幕动画。

任何帮助将不胜感激。谢谢。

Answer 1

假设这是最近的 react-navigation v6 版本，请使用 animationTypeForReplace 选项：

<Stack.Screen 
    name="Settings"
    component={SettingsScreen}
    options={{
        animationTypeForReplace: 'pop',
    }}
 />

https://reactnavigation.org/docs/stack-navigator/#animationtypeforreplace