在效果方法中使用时效果不起作用答案

【问题标题】：Effect does not work when used in the Effects method在效果方法中使用时效果不起作用
【发布时间】：2020-05-15 00:48:43
【问题描述】：

我正在尝试使用滚动效果，但效果不佳。

要考虑持续时间向下滚动，效果会起作用。

要向上滚动，持续时间会被忽略，它会立即滚动。

<TouchableOpacity
        onPress={() => setStateMenu(!stateMenu)}
        activeOpacity={10}
 >
...
</TouchableOpacity>


const [stateMenu, setStateMenu] = useState(false);
  const translateY = new Animated.Value(0);

  useEffect(() => {
    controlMenu();

  });

  function controlMenu() {
    if (!stateMenu) {//fechar Menu
      //alert('Fechando');
      Animated.timing(translateY, {
        toValue: 0,
        duration: 400,  
        useNativeDriver: true,
        //delay: 300,
      }).start();
    }
    else {//abrir Menu
      //alert('Abrindo');
      Animated.timing(translateY, {
        toValue: 800,
        duration: 400,
        useNativeDriver: true,
        //delay: 300,
      }).start();
    }
  }

当 stateMenu 等于 false 时，滚动从 0px 到 800px，考虑到 duration 所经过的时间，这是正确的。现在当 stateMenu 为 true 时，滚动一次到 0px，不考虑 0.400 秒。

【问题讨论】：

标签： react-native react-hooks hook

【解决方案1】：

试试这个

const [stateMenu, setStateMenu] = useState(false);
  const translateY = new Animated.Value(0);

  useEffect(() => {
    controlMenu();
  }, [stateMenu]); // listen changes in state menu

  function controlMenu() {
    if (!stateMenu) {//fechar Menu
      //alert('Fechando');
      Animated.timing(translateY, {
        toValue: 0,
        duration: 400,  
        useNativeDriver: true,
        //delay: 300,
      }).start();
    }
    else {//abrir Menu
      //alert('Abrindo');
      Animated.timing(translateY, {
        toValue: 800,
        duration: 400,
        useNativeDriver: true,
        //delay: 300,
      }).start();
    }
  }

【讨论】：