React native 动画获奖'；如果状态发生变化，则不能启动（演示用的小吃）

你好，我被一个愚蠢的问题难住了，我快发疯了

我只想在屏幕聚焦时制作一个简单而优雅的动画（在选项卡栏导航中）。在我在屏幕上执行状态更改之前，我的零食工作正常。然后，即使调用并执行了来自focus listener的回调（检查日志），动画也不会启动为什么？

我做了一个按钮手动触发动画。。。它能工作吗！？？？？ 我想我已经说清楚了，但是如果你需要更多的信息，请问我。我求求你，请帮助一个陷入绝望的兄弟

如果你懒得点击零食：

import React，{useState，useffect}来自“React”；
从“react native”导入{文本、视图、动画、尺寸、样式表、SafeAreaView、按钮}；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
功能主屏幕（{navigation}）{
const initialXPos=Dimensions.get（“窗口”）.height*0.5；
const xPos=新的动画.Value（initialXPos）；
常量不透明度=新的动画值（0）；
const[change，setChange]=useState（true）
useffect（（）=>{
const unsubscribe=navigation.addListener（“焦点”，来自bot）；
退订；
}, []);
const comingFromBot=（）=>{
xPos.setValue（初始化xPos）；
不透明度。设置值（0）；
平行动画([
动画。春天（xPos{
toValue:100，
张力：3，
useNativeDriver：没错，
}),
动画。计时（不透明度{
toValue:1，
持续时间：1000，
useNativeDriver：没错，
}),
]).start（）；
log（“动画被触发了！”）；
};
返回(
{改变？“家！”：“提米！”}
{/*调试*/}
comingFromBot（）}/>
setChange（！change）}/>
);
}
const styles=StyleSheet.create({
容器：{flex:1，alignItems:'center'}，
开火：{位置：“绝对”，宽度：“100%”，底部：0}，
更改：{位置：“绝对”，宽度：“100%”，底部：48}
});
函数设置屏幕（）{
返回(
{“再次转到“主页”选项卡，并注意动画。\n\n如果我们更改了文本，请接受…为什么？\n\n但如果我们使用按钮触发动画，则仍然有效，但在焦点检测上仍然无效…如何？\n\n如果热重新加载/硬重新加载应用程序，则仍然有效…帮助？”}
);
}
const Tab=createBottomTabNavigator（）；
函数MyTabs（）{
返回(
);
}
导出默认函数App（）{
返回(
);
}

它不起作用，因为您没有遵守规则。您的代码中存在以下错误：

您使用的是从外向内的变量

useffect

hook，但传递的是空的依赖项数组

动画值需要位于

useState

或

useRef

挂钩中，以便不会在每次渲染时重新创建动画值

然后，即使调用并执行了来自focus listener的回调（检查日志），动画也不会启动。。。为什么?

问题在于，回调是在重新渲染时进行状态更新后重新创建的，因此传递给焦点侦听器的回调不再与渲染中的回调相同。由于您的动画值也不在state/ref中，因此当旧的焦点侦听器引用旧值时，也会创建新的动画值。基本上，您看到的日志来自旧的侦听器，而不是新的侦听器

您应该使用并确保修复了其中的所有警告/错误，以避免此类问题

要修复代码，请执行以下更改：

const[xPos]=React.useState（（）=>newanimated.Value（initialXPos））；
const[opacity]=React.useState（（）=>new Animated.Value（0））；
const[change，setChange]=useState（true）
useffect（（）=>{
const unsubscribe=navigation.addListener（“焦点”，来自bot）；
退订；
}，[导航，来自机器人]；
const comingFromBot=useCallback（（）=>{
xPos.setValue（初始化xPos）；
不透明度。设置值（0）；
平行动画([
动画。春天（xPos{
toValue:100，
张力：3，
useNativeDriver：没错，
}),
动画。计时（不透明度{
toValue:1，
持续时间：1000，
useNativeDriver：没错，
}),
]).start（）；
log（“动画被触发了！”）；
}，[xPos，不透明度]；

---

基本上，我添加了

useCallback

，修复了依赖项数组，并将动画值移动到

useState

hook。

最后，由于@satya164:

我也希望我以前读过这篇文章

主屏幕代码：

//HomeScreen.js
功能主屏幕（{navigation}）{
const initialXPos=Dimensions.get（“窗口”）.height*0.5；
const xPos=useRef（新的动画.Value（initialXPos））.current
const opacity=useRef（新的动画.Value（0））.current
const[change，setChange]=useState（true）
useffect（（）=>{
const unsubscribe=navigation.addListener（“焦点”，来自bot）；
退订；
}，[导航，来自机器人]；
const comingFromBot=useCallback（（）=>{
xPos.setValue（初始化xPos）；
不透明度。设置值（0）；
平行动画([
动画。春天（xPos{
toValue:100，
张力：3，
useNativeDriver：没错，
}),
动画。计时（不透明度{
toValue:1，
持续时间：1000，
useNativeDriver：没错，
}),
]).start（）；
log（“动画被触发了！”）；
}，[xPos，不透明度，初始xPos]；
返回(
{改变？“家！”：“提米！”}
{/*调试*/}
comingFromBot（）}/>
setChange（！change）}/>
);
}

太棒了，谢谢@satya164。你让我明白了很多事情。所以我一直在寻找，我发现这是可行的