React Native: Как измененить стиль по клику?

Question

[ALX345]

Здравствуйте. Заинтересован в переносе чистого js-скрипта из electron на react native. Вопрос в следующем: есть блок с фиксированной позицией и top:0. По клику на кнопку необходимо выпадение этого блока(top:48px). Как на react возможно менять стили по клику?

Answer 1

[Сергей Соколов]

завести состояние этого блока isDropped (true / false),
по клику менять это состояние.
В отрисовке блока стиль делать зависимым от состояния:
{ top: `${isDropped ? 48 : 0}px` }

Comments

[ALX345]

Это работает, но только при статично заданной переменной. Когда по клику она меняется в процессе работы - ничего не происходит

[Сергей Соколов]

ALX345, ничем не могу помочь: вашего кода нет.

[ALX345]

var SearchDrop=false;
function HeadTabClick(){
	SearchDrop=true;
}
<Text style={style.headerBTN} onPress={() => {HeadTabClick();}}>BTN</Text>
<View style={{display: 'block',  position: 'fixed',  top: `${SearchDrop ? 48 : 0}px`}}>TAB</View>

[Сергей Соколов]

ALX345, такая переменная — не «реактивное» состояние, на изменения которого что-то может отреагировать. Вот пример с функциональным компонентом: