使用 react-native-redash 时出现意外闪烁
Unexpected flickering when using react-native-redash
我是新手,使用 react-native-redash 执行一些基于 react-native-reanimated 库的动画(这在性能方面非常棒)。
我的代码如下:
const Alert = (props) => {
const [visible, setVisible] = React.useState(false);
const [message, setMessage] = React.useState(null);
const animation = new Value(0);
const clock = new Clock();
React.useEffect(() => {
setMessage(props.message);
setVisible(props.visible);
}, [props]);
useCode(() =>
block([
set(
animation,
timing({
clock,
from: visible ? 0 : 1,
to: visible ? 1 : 0,
duration: 500,
easing: Easing.inOut(Easing.ease)
})
),
debug('Algo visible', animation)
], [animation])
);
const scale = mix(animation, 0, 1)
const opacity = mix(animation, 0, 1)
const from = 'transparent';
// const to = 'rgba(0,0,0,.75)';
const to = 'rgba(0,0,0,.75)'
const backgroundColor = interpolateColor(animation, {
inputRange: [0, 1],
outputRange: [from, to]
});
/* if(!props.visible){
console.log("OK");
return null;
} */
return (
<Animated.View
style={[styles.container, { backgroundColor, transform: [{ scale: scale }] }]}>
<Animated.View
style={[
styles.inner,
{
transform: [{ scale }],
opacity
}
]}>
<TouchableOpacity
activeOpacity={1}
onPress={() => {
setVisible(false)
setTimeout(() => {
props.onClosed();
}, 150);
}}
style={styles.close}>
<Image
source={require('app/src/assets/images/common/close_x2.png')}
style={{ width: 16, height: 16, resizeMode: 'contain' }}
/>
</TouchableOpacity>
<Text style={styles.message}>{ message }</Text>
</Animated.View>
</Animated.View>
)
}
这会使用简单的动画(例如不透明度或比例)打开模式,并在按下关闭按钮时关闭。
当模式打开时,一切正常。问题是模式关闭时。附上描述性问题的动图。
您有什么想法可以解决模态窗口关闭时的闪烁动画吗?
谢谢!
尝试将您的 Animated
值放入备忘录,这样它就不会在组件重新渲染时重置值
const {animation, clock} = useMemo(() => ({
animation: new Value(0),
clock: new Clock(),
}), []);
我是新手,使用 react-native-redash 执行一些基于 react-native-reanimated 库的动画(这在性能方面非常棒)。
我的代码如下:
const Alert = (props) => {
const [visible, setVisible] = React.useState(false);
const [message, setMessage] = React.useState(null);
const animation = new Value(0);
const clock = new Clock();
React.useEffect(() => {
setMessage(props.message);
setVisible(props.visible);
}, [props]);
useCode(() =>
block([
set(
animation,
timing({
clock,
from: visible ? 0 : 1,
to: visible ? 1 : 0,
duration: 500,
easing: Easing.inOut(Easing.ease)
})
),
debug('Algo visible', animation)
], [animation])
);
const scale = mix(animation, 0, 1)
const opacity = mix(animation, 0, 1)
const from = 'transparent';
// const to = 'rgba(0,0,0,.75)';
const to = 'rgba(0,0,0,.75)'
const backgroundColor = interpolateColor(animation, {
inputRange: [0, 1],
outputRange: [from, to]
});
/* if(!props.visible){
console.log("OK");
return null;
} */
return (
<Animated.View
style={[styles.container, { backgroundColor, transform: [{ scale: scale }] }]}>
<Animated.View
style={[
styles.inner,
{
transform: [{ scale }],
opacity
}
]}>
<TouchableOpacity
activeOpacity={1}
onPress={() => {
setVisible(false)
setTimeout(() => {
props.onClosed();
}, 150);
}}
style={styles.close}>
<Image
source={require('app/src/assets/images/common/close_x2.png')}
style={{ width: 16, height: 16, resizeMode: 'contain' }}
/>
</TouchableOpacity>
<Text style={styles.message}>{ message }</Text>
</Animated.View>
</Animated.View>
)
}
这会使用简单的动画(例如不透明度或比例)打开模式,并在按下关闭按钮时关闭。
当模式打开时,一切正常。问题是模式关闭时。附上描述性问题的动图。
您有什么想法可以解决模态窗口关闭时的闪烁动画吗?
谢谢!
尝试将您的 Animated
值放入备忘录,这样它就不会在组件重新渲染时重置值
const {animation, clock} = useMemo(() => ({
animation: new Value(0),
clock: new Clock(),
}), []);