Question

我无法将Animated.timing与setState一起使用。

export default function Main() {

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

  const {width, height} = Dimensions.get('window');

function Descer() {
    Animated.timing(translateY, {
        toValue: 800,
        duration: 2000,
        useNativeDriver: false
    }).start();
}

//(1) - With the "Teste" function, this works perfectly.
function teste()
{
  Descer();
  //setStateMenu(!stateMenu);
}

//(2) - In this way nothing happens.
function teste()
{
  Descer();
  setStateMenu(!stateMenu);
}


  return (
    <Container>
      <Header onPress={() => teste()} state={stateMenu}/>
      <Scene>
        <Menu/>
        <ScenePage style={[{flex:1, position:'absolute', top:0, left:0, zIndex:15, width:'100%', height:height }, {top:translateY}]}>
          <Routes />
        </ScenePage>

      </Scene>

    </Container>
  )
};

我没有两个“ Teste”功能，我只放了两个以说明会发生什么。

我需要使用第二种方法，为什么它不起作用？

Answer 1

要将setStateMenu与先前的状态值一起使用，您需要传递一个具有先前状态作为参数的函数。尝试像这样更改setStateMenu调用：

setStateMenu(prevState => !prevState);

如何在Animated.timing和setState中使用函数？

1 个答案: