更改屏幕后，react-native保存按鈕狀態

Question

我的應用程序中有5個按鈕[“運行”，“騎行”，“閱讀”，“編碼”，“牛仔”]，當我點擊它時，按鈕會改變顏色並在屏幕上顯示標題。 我正在使用這個庫： react-native-selectmultiple-button 。

假設我點擊按鈕“正在運行”和“騎行”，這些按鈕將突出顯示，文本將顯示在屏幕上，但是當我將屏幕更改為另一個頁面並返回上一個屏幕時，狀態將恢復為默認狀態。

以下是我的代碼：

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

有沒有辦法，即使在更換屏幕后我仍可以保持按鈕的狀態？

任何建議或意見將非常感激。 提前致謝！

Answer 1

你可以做的最好的事情是在Redux中保存你的狀態並使用redux-persist 。 您也可以使用AsyncStorage 。 我有類似的情況，我必須維持兩個組件來回導航之間的狀態，我使用了這樣的導航參數：

屏幕A：

this.props.navigation.navigate('ScreenB', {
              onPressScreenAFun: (params) => {
                this.screenAFun(params),
                ButtonState1: true // you can send multiple params
              },
            })

screenAFun = (ButtonState1) => {
 this.setState({buttonState1: ButtonState1})
}

屏幕B：

    screenBFun = (params) => {
       const { onPressScreenAFun, ButtonState1 } = this.props.navigation.navigate.state.params

      onPressScreenAFun(ButtonState1)
      this.props.navigation.goBack()
    }

Answer 2

有許多方法可以實現這一點 - 一種簡單的方法可能是使用AyncStorage API來保持按鈕的狀態，以便在返回到此屏幕時可以恢復它。

所以你可以用這個：

import { AsyncStorage } from "react-native"

然后在_singleTapMultipleSelectedButtons_limited(interest)您可以將以下內容添加到函數的末尾：

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

最后，您將此方法添加到組件中，以從任何持久化的數據初始化按鈕狀態：

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')
  }
}

希望這可以幫助！