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

Question

我希望在React Native中有从右到左的屏幕动画。我在互联网上查了很多，但大多数示例都是旧的，它们使用StackNavigator的方式不同，配置也不同。我认为他们使用的是React导航的旧版本。我使用的是版本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