Za pomocą

"Nawigacja reagująca": "^ 4.0.10",

"React-nawigacja-stos": "^ 1.10.3",

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

const HomeStackNavigator = createStackNavigator({
  List:ListContainer,
  Detail:DetailContainer,
  Modal: {
    screen: ModalContainer,
    navigationOptions: {
      ...StackViewTransitionConfigs.ModalSlideFromBottomIOS,
    },
  },
}, {
  mode: 'card',
  headerMode: 'none',
  defaultNavigationOptions: {
    gestureEnabled: true,
    ...StackViewTransitionConfigs.SlideFromRightIOS,
  },
});

Wszystkie inne ekrany otwarte w formie karty i chcę otworzyć tylko jeden konkretny ekran w formie modalnej.

Próbowałem

const HomeStackNavigator = createStackNavigator({
  List:ListContainer,
  Detail:DetailContainer,
  },
}, {
  mode: 'card',
  headerMode: 'none',
  defaultNavigationOptions: {
    gestureEnabled: true,
    ...StackViewTransitionConfigs.SlideFromRightIOS,
  },
});
const HomeStackNavigator2 = createStackNavigator({
  Home:HomeStackNavigator,
  Modal: {
    screen: ModalContainer,
  },
}, {
  mode: 'modal',
  headerMode: 'none',
});

Pierwszy kod nie powiódł się, ponieważ wszystkie łuki zostały otwarte w formacie karty.

W drugim kodzie próbowałem, na ekranie, którego chciałem, został otwarty w formie modalnej, ale kiedy przeprowadziłem się z modalności do szczegółów, modal był zamknięty.

W pierwszym kodzie, czy można otworzyć tylko ekran modalny w formularzu modalnym?

0
oijafoijf asnjksdjn 4 sierpień 2020, 06:24

1 odpowiedź

Najlepsza odpowiedź

Rozwiązałem to w ten sposób.

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

const transitionConfigs = (props) => {
  const { scene } = props;
  const { route } = scene;
  const params = route.params || {};
  const transition = params.transition || 'forHorizontal';
  if (transition === 'forVertical') {
    return StackViewTransitionConfigs.ModalSlideFromBottomIOS;
  }
  return StackViewTransitionConfigs.SlideFromRightIOS;
};

const HomeStackNavigator = createStackNavigator({
  List:ListContainer,
  Detail:DetailContainer,
  Modal: {
    screen: ModalContainer,
  },
}, {
  mode: 'card',
  headerMode: 'none',
  transitionConfig:transitionConfigs,
});

Zmień animację, wysyłając trasition:'forVertical' do paramsów podczas nawigacji.

0
oijafoijf asnjksdjn 5 sierpień 2020, 00:50