我的应用程序中有 5 个按钮 [“跑步”、“骑行”、“阅读”、“编码”、“牛儿”],当我单击它时,按钮会更改其颜色并在屏幕上显示标题。我正在使用这个库:反应本机选择多个按钮.
假设我单击了“跑步”和“骑行”按钮,这些按钮将突出显示,并且文本将显示在屏幕上,但是当我将屏幕更改为另一个页面并返回到上一个屏幕时,按钮状态将设置回默认值。
下面是我的代码:
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"
}
});
有没有办法即使在更改屏幕后也可以保留按钮的状态?
任何建议或意见将不胜感激。提前致谢!