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 }
);

Answer 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-native应用程序中某些屏幕的模式导航

2 个答案: