react-native - react-native 应用程序中某些屏幕的模态导航

Question

对于我的应用程序中的 3 个屏幕，我需要进行模式转换。对于其余屏幕 - 我需要默认的从右到左过渡。

如何使用不同的堆栈导航器实现这一点？

const AuthStack = createStackNavigator(
  {
    LogIn: { screen: LogInScreen },
    Signup: { screen: SingupScreen },
    Welcome: { screen: WelcomeScreen },
    CodeVerification: { screen: CodeVerificationScreen },
    PasswordSelection: { screen: PasswordSelectionScreen },
    RegistrationSuccess: { screen: RegistrationSuccessScreen }
  },
  {
    initialRouteName: 'LogIn'
  }
)

const ModalNavigator = createStackNavigator({
  ContactInfoEdit: { screen: ContactInfoEditScreen },
  DeliveryAddressEdit: { screen: DeliveryAddressEditScreen },
  OrderPlacedScreen: { screen: OrderPlacedScreen },
},
{
  initialRouteName: 'ContactInfoEdit',
})

const ProductsStack = createStackNavigator(
  {
    Products: {
      screen: ProductsScreen
    },
    Product: {
      screen: ProductScreen
    },
    ProductBuy: {
      screen: ProductBuyScreen
    },
    OrderConfirm: {
      screen: OrderConfirmScreen
    },
    PlaceOrder: {
      screen: PlaceOrderScreen
    },
    Modal: ModalNavigator
  },
  {
    initialRouteName: 'Products',
    mode: 'modal',
  }
)

如果我设置 mode: modal 它将使所有的导航动画都是模态的。如果我删除它，所有导航将是默认的(从右到左)

const ProductsTabStack = createBottomTabNavigator(
  {
    Orders: { screen: OrdersScreen },
    Products: { screen: ProductsStack },
    Profile: { screen: ProfileScreen }
  },
  {
    initialRouteName: 'Products',
    backBehavior: 'none',
    tabBarOptions: {
      activeTintColor: '#ffffff',
      inactiveTintColor: primaryColor,
      activeBackgroundColor: primaryColor,
      labelStyle: {
        marginBottom: 17,
        fontSize: 15,
      },
      tabStyle: {
        shadowColor: primaryColor,
        borderWidth: 0.5,
        borderColor: primaryColor,
      },
    },
  },
)

export const AppNavigator = createSwitchNavigator({
  Auth: AuthStack,
  Categories: ProductsTabStack
})

我尝试在 ModalNavigator 中设置 mode: modal，但随后它采用了默认的父导航。

Answer 1

您可能想在导航到该屏幕时尝试使用 StackNavigatorConfig this.props.navigation.navigate('ScreenName', params, {mode: 'modal'})

如果您想将所有转换代码保存在与现在相同的文件中，您可以按照 react-navigation 建议的方式执行操作 here

事情是这样的

import { createStackNavigator, StackViewTransitionConfigs } from 'react- navigation';

/* The screens you add to IOS_MODAL_ROUTES will have the modal transition.  */
const IOS_MODAL_ROUTES = ['OptionsScreen'];

let dynamicModalTransition = (transitionProps, prevTransitionProps) => {
   const isModal = IOS_MODAL_ROUTES.some(
   screenName =>
      screenName === transitionProps.scene.route.routeName ||
   (prevTransitionProps && screenName === 
prevTransitionProps.scene.route.routeName)
)
return StackViewTransitionConfigs.defaultTransitionConfig(
    transitionProps,
    prevTransitionProps,
    isModal
);
};

const HomeStack = createStackNavigator(
  { DetailScreen, HomeScreen, OptionsScreen },
  { initialRouteName: 'HomeScreen', transitionConfig: dynamicModalTransition }
);