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

Posted 2023-02-23

【中文标题】react-native 应用程序中某些屏幕的模态导航

【英文标题】：Modal navigation for certain screens in react-native app

【发布时间】：2019-02-15 14:49:00

【问题描述】：

对于我的应用程序中的 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，但后来它采用了默认的父导航。

【参考方案1】：

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

如果您想将所有转换代码保留在与现在相同的文件中，您可以按照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 
);

【参考方案2】：

好的，使用https://www.npmjs.com/package/react-navigation-transitions 在 1 StackNavigator 中找到了自定义转换的解决方法：

const handleCustomTransition = ( scenes ) => 
  const nextScene = scenes[scenes.length - 1]

  if (nextScene.route.routeName === 'ContactInfoEdit')
    return fromBottom()
  else
    return fromRight()


const ProductsStack = createStackNavigator(
  
    Products: 
      screen: ProductsScreen
    ,
    Product: 
      screen: ProductScreen
    ,
    ProductBuy: 
      screen: ProductBuyScreen
    ,
    OrderConfirm: 
      screen: OrderConfirmScreen
    ,
    PlaceOrder: 
      screen: PlaceOrderScreen
    ,
    ContactInfoEdit:  screen: ContactInfoEditScreen ,
    DeliveryAddressEdit:  screen: DeliveryAddressEditScreen ,
    OrderPlacedScreen:  screen: OrderPlacedScreen ,
  ,
  
    initialRouteName: 'Products',
    transitionConfig: (nav) => handleCustomTransition(nav)
  
)

【讨论】：

不需要使用新包，这已经可以使用 react-navigation 检查我的答案了