更改屏幕后，react-native保存按钮状态 [英] react-native save button status after changing screens

问题描述

我的应用程序中有5个按钮[运行，骑行，阅读，编码，牛仔]，当我点击它时，按钮会改变颜色并在屏幕上显示标题。我正在使用这个库： react-native-selectmultiple-button 。

I have 5 buttons ["running", "riding", "reading", "coding", "Niuer"] in my app and when I click on it, the button changes its color and displays the title on screen. I am using this library: react-native-selectmultiple-button.

假设我点击了正在运行按钮，并且骑马，这些按钮将突出显示，文本将显示在屏幕上，但当我将屏幕更改为另一页并返回时上一个屏幕按钮状态被设置回默认值。

Say I clicked button "running", and "riding", these buttons will be highlighted and text will display on screen but when I change the screen to another page and come back to the previous screen button state is set back to default.

以下是我的代码：

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"
  }
});

有没有办法可以在更改屏幕后保持按钮的状态？

Is there a way I could keep the status of the buttons even after changing the screen?

任何建议或意见都会非常感激。在此先感谢！

Any advice or comments would be really appreciated. Thanks in advance!

推荐答案

有很多方法可以实现这一点 - 一种简单的方法可能是使用 AyncStorage API 保持按钮的状态，以便在返回到此屏幕时恢复。

There are a number of ways you could achieve this - one simple way might be to use the AyncStorage API to persist the state of your buttons so that it can be restored on return to this screen.

所以你可以使用它：

import { AsyncStorage } from "react-native"

然后在 _singleTapMultipleSelectedButtons_limited（兴趣）您可以在函数末尾添加以下内容：

and then in _singleTapMultipleSelectedButtons_limited(interest) you could add the following to the end of the function:

AsyncStorage.setItem('button_state',
     JSON.stringify(this.state.multipleSelectedDataLimited));

最后，您要将此方法添加到组件中，以便从任何数据中初始化按钮状态持久化：

finally, you'd add this method to your component to initialise your button state from any data that was persisted:

componentDidMount() {
  try {
    // Fetch data from store if it exists
    AsyncStorage.getItem('button_state').then(data => {

      // If data present, try and parse it and restore button state from it
      if(data) {
        const multipleSelectedDataLimited = JSON.parse(data);
        this.setState({ multipleSelectedDataLimited })
      }          
    });
  }
  catch(err){
    console.log('Failed to load button state')
  }
}

希望这会有所帮助！

这篇关于更改屏幕后，react-native保存按钮状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！