0

estou tentado fazer o flexDirection alternar entre 'row' e 'column' em um clique(um clique vai pra 'row', outro clique vai pra 'column'), o problema é que quando muda para o 'column' eu tenho que dar dois cliques para voltar para o row

import React, {useState} from "react";
import {View, StyleSheet, ToastAndroid, 
  TouchableWithoutFeedback} from 'react-native';

export default () => {

  let direcaoAtual = 'column'

  const showToast = () => {
    ToastAndroid.show(direcaoAtual, 
    ToastAndroid.SHORT);
  };
   
  function mudaDirecao(){
    
    if(direcaoAtual == 'row'){
      direcaoAtual = 'column'
    }
    else{
      direcaoAtual = 'row'
    }
    return(direcaoAtual)   
  }  

  const [curruntDirection, setCurrentDirection] = 
    useState(mudaDirecao());

  return(
    <TouchableWithoutFeedback onPress={() => {
      setCurrentDirection(mudaDirecao());showToast()}}>
      <View style={[style.defalt, 
        {flexDirection: curruntDirection}]}>
        <View style={style.espaco1}/>
        <View style={style.espaco2}/>
      </View>
      
    </TouchableWithoutFeedback>
  )
}

const style = StyleSheet.create({
  defalt: {
    backgroundColor: '#69dd00',
    width: '100%',
    flex: 1,
    flexDirection: 'row',
   },
  espaco0: {
    backgroundColor: '#69dd00',
    width: '100%',
    flex: 1,
    // flexDirection: 'row',
   },
  espaco1: {
     backgroundColor: '#69dd',
     flexGrow: 2
    
    },
  espaco2: {
    backgroundColor: '#0000CD',
    flexGrow: 2
  },
})

1 Resposta 1

0

useState é uma hook assíncrona, o que quer dizer que não atualiza automaticamente, por isso não é uma boa ideia utilizá-la dentro de uma função dessa forma.

Tente de forma mais simplificada, fazendo a mudança do valor do useState diretamente dentro do setCurrentDirection:

import React, {useState} from "react";
import {View, StyleSheet, ToastAndroid, 
  TouchableWithoutFeedback} from 'react-native';

export default () => {

  const showToast = () => {
    ToastAndroid.show(direcaoAtual, 
    ToastAndroid.SHORT);
  };
   
  const [currentDirection, setCurrentDirection] = 
    useState('row');

  return(
    <TouchableWithoutFeedback onPress={() => {
      setCurrentDirection(currentDirection == 'row' ? 'column' : 'row');showToast()}}>
      <View style={[style.defalt, 
        {flexDirection: currentDirection}]}>
        <View style={style.espaco1}/>
        <View style={style.espaco2}/>
      </View>
      
    </TouchableWithoutFeedback>
  )
}

const style = StyleSheet.create({
  defalt: {
    backgroundColor: '#69dd00',
    width: '100%',
    flex: 1,
    flexDirection: 'row',
   },
  espaco0: {
    backgroundColor: '#69dd00',
    width: '100%',
    flex: 1,
    // flexDirection: 'row',
   },
  espaco1: {
     backgroundColor: '#69dd',
     flexGrow: 2
    
    },
  espaco2: {
    backgroundColor: '#0000CD',
    flexGrow: 2
  },
})
1
  • valeu pelo esclarecimento, ajudou muito Commented 28/06/2022 às 12:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .