Блог

Я пытаюсь создать приложение, которое показывает фотографии кошек на выставке. У меня есть фотография кошки, которая отображается изначально. У меня есть кнопка, и когда я нажимаю на нее, я хочу изменить отображаемое изображение кошки. Вот что у меня есть:

 let imageUri = {uri: 'https://images.unsplash.com/photo-1615789591457-74a63395c990?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZG9tZXN0aWMlMjBjYXR8ZW58MHx8MHx8amp;w=1000amp;q=80'};   

Я определяю функцию, которая изменяет imageUri значение:

 const displayImage = async () =gt; {  imageUri = {uri: 'https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y3V0ZSUyMGNhdHxlbnwwfHwwfHw=amp;w=1000amp;q=80'} }  

Затем внутри return() я делаю следующее:

 lt;View style={styles.container}gt;  lt;ImageBackground  source={require('./assets/images/background.png')}  style={styles.image}  /gt;  lt;Text style={styles.text}gt; Here is a cat picture lt;/Textgt;  lt;Button  style = {styles.button}  title="Display"  onPress = {() =gt; displayImage()}  /gt;  lt;Image source={imageUri} style = {{width: 155, height: 259}} /gt;  lt;/Viewgt;  

Однако это не обновляет картину.

Причина, по которой ваше изображение не меняется, заключается в том, что состояние компонента не меняется. Чтобы решить эту проблему, вам необходимо управлять состоянием данных компонентов. Вы можете сделать это с помощью состояния использования крючка.

Обязательно импортируйте крючок useState.

 import {useState} from 'react';  

Затем вы можете установить управляемую переменную состояния для своего изображения.

 const [imageUri, setImageUri] = useState(   'https://images.unsplash.com/photo-1615789591457-74a63395c990?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZG9tZXN0aWMlMjBjYXR8ZW58MHx8MHx8amp;w=1000amp;q=80' );  

Затем все, что вам нужно, — это обновить событие нажатия кнопки, чтобы вызвать переключатель состояний, чтобы установить новое изображение в состояние. Поэтому, когда изображение изменяет состояние компонентов, оно обновляется с помощью нового изображения.

 lt;View style={styles.container}gt;  lt;ImageBackground  source={require('./assets/images/background.png')}  style={styles.image}  /gt;  lt;Text style={styles.text}gt; Here is a cat picture lt;/Textgt;  lt;Button  style = {styles.button}  title="Display"  onPress = {() =gt; setImageUri('https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y3V0ZSUyMGNhdHxlbnwwfHwwfHw=amp;w=1000amp;q=80')}  /gt;  lt;Image source={imageUri} style = {{width: 155, height: 259}} /gt; lt;/Viewgt;