У меня есть компонент с кнопкой в которую передается свойство quantity
.
От этого свойства зависит, какое состояние isActive
будет у кнопки.
Сначала я это условие написал в конструкторе, всё работает чётко. Но на сценах имеющих свои состояния в момент перерисовки сцены кнопка также перерисовывается, но без участия конструктора. В итоге после смены свойства quantity
состояние не меняется.
Если я уберу состояние isActive
и буду использовать только свойство quantity
, я не смогу влиять на отображение. Потому что такого метода как setProp
не существует. А если я установлю значение напрямую в this.props
и выполню forceUpdate
может быть сработает, но мне кажется это костыльное решение. Подскажите, как наладить связь или как лучше сделать?
Screen.js
<Favorite quantity={data.favorite_count} id={data.id} />
Favorite.js
import React, { Component } from 'react';
import { TouchableOpacity, Image } from 'react-native';
export default class Favorite extends Component {
state = {
isActive: false
};
constructor(props) {
super(props);
if (this.props.quantity > 0)
this.state.isActive = true;
}
render() {
let icon;
if (this.state.isActive)
icon = require('../assets/btn-unfavorite.png');
else
icon = require('../assets/btn-favorite.png');
return (
<TouchableOpacity style={this.props.style} onPress={this.onPress.bind(this)}>
<Image source={icon} />
</TouchableOpacity>
);
}
onPress() {
this.setState(previousState => (
{ isActive: !previousState.isActive }
));
}
}