estado del botón de guardar reactivo nativo después de cambiar las pantallas
Tengo 5 botones ["correr", "montar", "leer", "codificar", "Niuer"] en mi aplicación y cuando hago clic en él, el botón cambia de color y muestra el título en la pantalla. Estoy usando esta biblioteca: react-native-selectmultiple-button.
Di que hice clic en el botón "Ejecutar" y "Montar", estos botones se resaltarán y el texto se mostrará en la pantalla, pero cuando cambio la pantalla a otra página y regrese al estado del botón de pantalla anterior, se restablece a los valores predeterminados.
Debajo está mi código:
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"
}
});
¿Hay alguna forma de mantener el estado de los botones incluso después de cambiar la pantalla?
Cualquier consejo o comentario sería muy apreciado. ¡Gracias por adelantado