Экран Б:
м приложении 5 кнопок [«бег», «езда», «чтение», «кодирование», «Niuer»], и когда я нажимаю на нее, кнопка меняет цвет и отображает заголовок на экране. Я использую эту библиотеку:реагировать-нативный-selectmultiple кнопки.
Скажем, я нажал кнопку «бег» и «езда», эти кнопки будут выделены, и текст будет отображаться на экране, но когда я переключаю экран на другую страницу и возвращаюсь к предыдущему экрану, состояние кнопки возвращается к значению по умолчанию.
Ниже мой код:
const multipleData = ["running", "riding", "reading", "coding", "Niuer"];
export default class SimpleButton extends Component {
constructor(props) {
super(props);
this.state = {
multipleSelectedDataLimited: []
};
}
render() {
return (
<View style={{paddingTop:200}}>
<Text style={styles.welcome}>
implement the multiple-select buttons demo by SelectMultipleButton
</Text>
<Text style={{ color: 'blue', marginLeft: 10 }}>
I like {_.join(this.state.multipleSelectedDataLimited, ", ")}
</Text>
<View
style={{
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "center"
}}
>
{multipleData.map(interest => (
<SelectMultipleButton
key={interest}
buttonViewStyle={{
borderRadius: 10,
height: 40
}}
textStyle={{
fontSize: 15
}}
highLightStyle={{
borderColor: "gray",
backgroundColor: "transparent",
textColor: "gray",
borderTintColor: 'blue',
backgroundTintColor: 'blue',
textTintColor: "white"
}}
value={interest}
selected={this.state.multipleSelectedDataLimited.includes(
interest
)}
singleTap={valueTap =>
this._singleTapMultipleSelectedButtons_limited(interest)
}
/>
))}
</View>
</View>
);
}
_singleTapMultipleSelectedButtons_limited(interest) {
if (this.state.multipleSelectedDataLimited.includes(interest)) {
_.remove(this.state.multipleSelectedDataLimited, ele => {
return ele === interest;
});
} else {
if (this.state.multipleSelectedDataLimited.length < 3)
this.state.multipleSelectedDataLimited.push(interest);
}
this.setState({
multipleSelectedDataLimited: this.state.multipleSelectedDataLimited
});
}
}
const styles = StyleSheet.create({
welcome: {
margin: 10,
marginTop: 30,
color: "gray"
}
});
Можно ли как-то сохранить состояние кнопок даже после смены экрана?
Любые советы или комментарии будут очень признательны. Заранее спасибо!