使用 React Navigation 时 React Native Switch 没有动画答案

【问题标题】：React Native Switch not animating when using React Navigation使用 React Navigation 时 React Native Switch 没有动画
【发布时间】：2020-07-30 20:46:21
【问题描述】：

我正在尝试将Switch 添加到我的应用程序中，但其动画无法正常工作。我尝试创建一个 Snack 并注意到它在没有导航的情况下工作 (see this snack) 但在屏幕内时不起作用 (see this snack)。

这似乎只是在 Android 中的问题。

Switch 代码就是这样：

const MySwitch = () => {
  const [value, setValue] = React.useState(false);
  return <Switch value={value} onValueChange={setValue} />;
};

我做错了吗？是 Expo、React Navigation 还是 Switch 的问题？

在最坏的情况下，我如何自己为组件制作动画？

当前行为/预期行为：

React Navigation 版本：

"@react-navigation/native": "^5.7.2",
"@react-navigation/bottom-tabs": "^5.7.2",

【问题讨论】：

标签： react-native expo react-navigation

【解决方案1】：

也遇到了这个错误，正如描述的那样。我实现了一个设置页面，如果您切换一个选项，则会显示另一个切换选项。第二个 Toggle 没有这个 bug，这是 100% 一致的。所以我的猜测是，他的 bug 仅针对在初始渲染过程中以某种方式渲染的 Switch 组件触发。

作为此错误的解决方法，为渲染 Switch 引入 10 毫秒的小延迟可以完全解决该问题，而不会产生明显的副作用。

function useDelay(ms: number) {
    const [gate, setGate] = useState(false);
    useEffect(() => {
      setTimeout(() => {
        setGate(true);
      }, ms);
    });
    return gate;
}

const delayRender = useDelay(10);

return (
      <>
        {delayRender && (
            <Switch />
        )}
      </>
);

【讨论】：