React Native: режим навигатора стека = «карта» или режим = «модальный» не работает (проект expo)

#javascript #react-native #expo #react-native-navigation #react-navigation-stack

#javascript #react-native #выставка #react-native-навигация #реагировать-навигация-стек

Вопрос:

Ни mode =»card», ни mode =»modal» не работают при навигации по стеку. Протестировано в OnePlus 5T и Android Studio (Google Pixel)

На Android и IOS режим стекового навигатора по умолчанию — «card», но при тестировании происходит простой переход к навигации. Даже после указания mode=»card» или mode=»modal», во время навигации по-прежнему не отображается никакого влияния на переход.

 import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, Button } from 'react-native';


const First=({navigation})=>{
  return (
    <>
    <Text>First Page</Text>
    <Button title="Second Page" onPress={()=>navigation.navigate("Second")}/>
    </>);
}


const Second=()=>{
  return (
    <Text>Second Page</Text>);
}


const Stack=createStackNavigator();

const StackNavigate=()=>{
  return (
  <Stack.Navigator mode='modal'>
    <Stack.Screen name="First" component={First}/>
    <Stack.Screen name="Second" component={Second}/>
  </Stack.Navigator>)
}


export default function App() {
    return (
      <NavigationContainer >
        <StackNavigate/>
      </NavigationContainer>

  );
}
 

Комментарии:

1. Вы должны установить headerMode='flaot' or 'screen' , используете ли вы mode='modal' и хотите изменить переход. Также проверьте это: reactnavigation.org/docs/stack-navigator/#mode

Ответ №1:

Я столкнулся с аналогичной проблемой, пытаясь применить переходы экрана к моему приложению react native. Похоже mode , для визуальной опции требуется дополнительная информация о том, как экраны потребуют перехода. То, что на самом деле работает без сбоев, — это предварительные настройки перехода в готовых конфигурациях, описанных в документации.

Ссылка по ссылке:

 import { TransitionPresets } from '@react-navigation/stack';

// ...

<Stack.Screen
  name="Profile"
  component={Profile}
  options={{
    title: 'Profile',
    ...TransitionPresets.ModalSlideFromBottomIOS,
  }}
/>;
 

Доступные в настоящее время переходы:

SlideFromRightIOS , ModalSlideFromBottomIOS , ModalPresentationIOS , FadeFromBottomAndroid , RevealFromBottomAndroid , ScaleFromCenterAndroid , DefaultTransition , ModalTransition

Все это стандартные переходы, предоставляемые iOS и Android

Чтобы сделать этот процесс намного более кратким и простым, вы можете попробовать добавить эти переходы, используя defaultNavigationOptions while defining a navigator, как это делается в ReactNavigation4.x, и это добавит переходы на все вышеупомянутые экраны.

Ответ №2:

mode =»модальный» удаляется в пользу презентации: ‘модальный’

презентация: ‘modal’ показывает новый стиль представления modal, представленный в iOS 13. Он также автоматически регулирует такие вещи, как высота строки состояния в заголовке, что раньше приходилось делать вручную.

Если вы не хотите использовать новые анимации, вы можете изменить их по своему вкусу, используя связанные с анимацией параметры. Чтобы использовать модальную анимацию iOS из React Navigation 5, используйте TransitionPresets .ModalSlideFromBottomIOS.

Кроме того, новая презентация: опция ‘transparentModal’, чтобы упростить создание прозрачных модалов.