Как обновить источник изображения с ответа на событие пресса

Question

У меня есть компонент touchableOpacity, содержащий некоторый файл изображения .png, я хочу изменить один из источников изображения и связать событие изменения с событием onPress. Я тока инициализации источника в качестве опоры в getInitialState(), как

source: require('someSource.png') 

и осуществлять

this.setState({source: require('someOtherSource.png')}); 

к функции onPress. Каким-то образом размер изображения изменяется соответствующим образом, потому что я добавил resizeMode: «содержать» в стиле изображения. Но второй файл изображения не загружался в представление. части, где вид изображения:

<TouchableOpacity style={styles.newUserRegister} 
        onPress={this.doRegister}> 
       <Image style={styles.accNewUser} source={this.state.source}/> 
</TouchableOpacity> 

и в функции doRegister():

this.setState({source: require('someOtherSource.png')}); 

У меня есть три состояния источника изображения, так что я думал, вызвать функцию SetState в doRegister может быть лучшее решение.

Кроме того, в случае, если это проблема с моделированием, это стили для accNewUser

accNewUser:{ 
    marginTop:5, 
    resizeMode: 'contain', 
    alignItems: 'center', 
}, 

Answer 1

Я сделал этот пример для случая: https://rnplay.org/apps/jePI5Q

К сожалению RNPlay не позволяет добавлять активы, поэтому мне пришлось использовать внешние изображения с ссылкой uri. Просто замените эти ссылки на require(<asset>), и все будет в порядке.

Этот пример переключает состояние между defaultSource (стрелка вверх), а другой (стрелка вниз).