Есть ли способ, чтобы навигационный переход React Native исчезал до черного, а затем плавно переходил от черного к следующему экрану?
Некоторое время гуглил, я нашел только методы изменения непрозрачности экрана или перемещения его слева направо или справа налево, но я не нашел перехода от экрана к черному. Любая помощь приветствуется.
Если вы используете последнюю версию react-navigation-stack, вы можете использовать _2 _ / _ 3_ для этого:
import * as React from 'react';
import { Animated, Button, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {
createStackNavigator,
CardStyleInterpolators,
HeaderStyleInterpolators,
useCardAnimation,
} from 'react-navigation-stack';
function ScreenA({ navigation }) {
return (
<View style={{ flex: 1 }}>
<Button onPress={() => navigation.push('ScreenB')} title="Go to B" />
</View>
);
}
function ScreenB() {
const { current } = useCardAnimation();
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Animated.View
style={[
StyleSheet.absoluteFill,
{ backgroundColor: 'black', opacity: current.progress },
]}
/>
</View>
);
}
const Stack = createStackNavigator({
ScreenA,
ScreenB,
});
Просто поместите черный <div> за этим экраном и
Спасибо @Prajwal, решение для перехода CSS:
document.getElementsByTagName(`main`)[0].style.opacity = `0`; main {
position: fixed; /* place it before .black */
background-color: white;
width: 100%;
height: 100%;
transition-property: opacity; /* set opacity to one of the transition properties */
transition-duration: 4s; /* set transition duration */
}
.black {
position: fixed; /* place it behind main */
background-color: black; /* make it black */
width: 100%; /* make it fill available space */
height: 100%; /* make it fill available space*/
}
body {
margin: 0; /* make it fill available space*/
}<body>
<div class="black"></div>
<main>
<p>lorem</p>
</main>
</body>Вы также можете использовать функцию setInterval(), чтобы уменьшить непрозрачность по крупицам.
const step = 0.05; // set the step of opacity change
const timeInterval = 200; // set the sleep time of opacity change
const times = 1 / step; // calculate times needed for opacity change
document.getElementsByTagName(`main`)[0].style.opacity = `1`; // set initial opacity to make getting the float value of it work.
let time = 0; // initially, the time of making changes is zero
const lowerOpacity = window.setInterval(function() {
if (time + 1 === times) {
window.clearInterval(lowerOpacity);
} // clearInterval() when the time of changes has reached the needed times
document.getElementsByTagName(`main`)[0].style.opacity =
`${parseFloat(document.getElementsByTagName(`main`)[0].style.opacity) -
0.05}`; // set the opacity to make it dimmer
time += 1; // increment time to match the changed times
}
, timeInterval); main {
position: fixed; /* place it before .black */
background-color: white;
width: 100%;
height: 100%;
}
.black {
position: fixed; /* place it behind main */
background-color: black; /* make it black */
width: 100%; /* make it fill available space */
height: 100%; /* make it fill available space*/
}
body {
margin: 0; /* make it fill available space*/
}<body>
<div class="black"></div>
<main>
<p>lorem</p>
</main>
</body>
Animated.Viewс абсолютным позиционированием иbackgroundColor: 'black'на вашем компоненте, начиная сopacity: 0. Затем, когда пользователь нажимает кнопку для навигации, вы переходите к непрозрачности, равной 1, и ваш обратный вызов после завершения анимации - это переход к следующему экрану. Ваш следующий экран начинается с того же компонента, но с непрозрачностью: 1, а вашcomponentDidMountанимирует непрозрачность до 0. Я думаю, это должно сработать ... - person James schedule 30.12.2019zIndex? В качестве альтернативы можно было бы сделать обратное: черный полноэкранный вид должен располагаться позади всего остального, то есть более низкий zIndex, чем основной вид, а затем исчезнуть с основного вида доopacity: 0- person James schedule 31.12.2019