Question

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

2019-02-15

2210

react-native

对于我的应用中的 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 建议的方式执行操作此处

操作方式如下

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