#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’, чтобы упростить создание прозрачных модалов.