1

Estou tentando trocar a imagem com useState, mas nem chegar a ver a imagem estou conseguindo e não aparece erro falando.

let imagens = {
  img1: 'src/assets/img_red.jpg',
  img2: 'src/assets/img_blue.jpg',
}
const trocarimagem = () => {
    setImagem(imagens.img2)
}
const [imagem, setImagem] = useState(imagens.img1)
<View>
  <Image source={imagem} style={{width: 150, height: 150,}}></Image>
  <Button onPress={trocarimagem} title='trocar'></Button>
</View>
1
  • se pode montar um índice que é a melhor solução e com esse índice trocar o valor pelo outro. Exemplo: imagens['img1'] e imagens['img2'] no useState só armazene img1 e faça um pergunta para trocar um indice pelo outro e na <Image source={imagens[image]} />
    – novic
    Commented 14/04/2022 às 23:28

1 Resposta 1

1

A lógica é trocar pelo índice o objeto imagens onde se estiver img1 se trocar pela img2 e vice-versa. No evento do botão faz a mesma pergunta e troca o índice pelo outro e o componente atualiza.

Exemplo:

function App() {
  let imagens = {
    img1: 'https://image.shutterstock.com/image-photo/native-american-teepee-grassy-plains-600w-1613143510.jpg',
    img2: 'https://image.shutterstock.com/image-photo/park-small-peoples-north-600w-796680427.jpg',
  }
  const trocarimagem = () => {
    setImagem(state => state === 'img1' ? 'img2': 'img1');
  }
  const [imagem, setImagem] = React.useState('img1');
  return (
    <div>
      <div style={{marginTop: '15px'}}>
        <button onClick={trocarimagem}>Trocar para {imagem=== 'img1' ? 'img2': 'img1'}</button>
      </div>
      <div style={{marginTop: '15px'}}>
        <img src={imagens[imagem]} style={{width:'75%'}} />
      </div>      
    </div>
  );
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Observação: Esse código foi realizado com , mas a lógica é bem parecida para .

1
  • Obrigado de mais, consegui resolver esse problema.
    – user204906
    Commented 15/04/2022 às 16:40

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