Android 上的 React 导航转换

Question

我有一个底部选项卡导航器，按下按钮时，它会将我导航到堆栈屏幕。在 Android 设备上，过渡是从底部到顶部。我想像在 iOS 上一样实现从左到右的转换，但我不知道如何实现。

我已经在我的堆栈屏幕上添加了这个，

<Stack.Navigator
  screenOptions={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
  }}
>
    <Stack.Screen name="Screen 1" component={ScreenComponent1} />
    <Stack.Screen name="Screen 2" component={ScreenComponent2} />
</Stack.Navigator>

但它只能从堆栈屏幕 1 到屏幕 2，而不是从带有底部选项卡的屏幕到堆栈屏幕。 请问有什么解决办法吗？

这是我的底部标签导航器：

<Tab.Navigator>
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>

这就是家：

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Button} from '../../components';

const Home = () => {
  return (
    <View>
      <Text>Go To Screen1</Text>
      <Button title="Screen1" />
    </View>
  );
};

export default Home;

Answer 1

试试这个

import {
  CardStyleInterpolators,
} from '@react-navigation/stack';

<NavigationContainer ref={NavigationService.navigationRef}>
        <Navigator
          
          screenOptions={{
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, // Transition as IOS
          }}
      
          {...{headerMode}}>
          {screens.map(({name, component}, key) => (
            <Screen
              {...{name, component, key}}
              initialParams={
                name === 'App'
                  ? {
                      initRoute,
                      params,
                    }
                  : {}
              }
            />
          ))}
        </Navigator>
      </NavigationContainer>