使用ComponentDidUpdate

Question

在这里阅读了大量其他相关问题之后。我找不到答案。我已经改进了我的代码，并且我相信我已经很接近解决方案了，但是我仍然无法实现我的目标。

我是新手，可以编码并响应本机。我想建立水提醒应用程序，我有2个主屏幕。我在主屏幕上显示当前进度，今天用户喝了多少水。在设置中，屏幕用户输入她的年龄，体重和性别，以确定他们每天应喝的水量（sliderValue状态）。

然后在设置屏幕中定义金额后，我想在主屏幕中使用此金额。因为我是一个初学者，所以不想在我的应用程序中创建复杂性。

我正在寻找没有redux等的解决方案。因此，在其他问题中，我看到创建全局变量对我来说是理想的选择。 当使用componentDidUpdate更新状态时，我定义了global.drinkAmount并将其设置为sliderValue状态。但是我仍然得到零。

// HomeScreen.js

  state = {
    progress: 0,
    drunk: 0,
    open: false,
    goal: global.drinkAmount,
  };

render(){
  <View>
    <Text style={styles.drunk}>{this.state.drunk} / <Text style={styles.goal}>{this.state.goal}</Text></Text>
  </View>
}

//SettingsScreen.js

 global.drinkAmount = 0;
export default class SettingsScreen extends React.Component {

  state = {
    age: "",
    weight: "",
    gender: "",
    sliderValue: 0
  };

  componentDidUpdate(prevProps, prevState) {
    if (this.state.sliderValue !== prevState.sliderValue) {
      global.drinkAmount = this.state.sliderValue;
    }
  }

Answer 1

有两个选项可以解决您的问题。我认为最简单的方法是将AsyncStorage和导航侦听器用于生命周期事件。

AsyncStorage

AsyncStorage允许您保存字符串，以便可以检索它们。确保您已阅读有关该文档的文档，其中有一些很好的示例。 https://facebook.github.io/react-native/docs/asyncstorage

您可以通过以下方式将项目设置到AsyncStorage中

import { AsyncStorage } from 'react-native';

// note both key and value must be strings
_storeData = async (key, value) => {   
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
  // Error saving data
  }
}

_retrieveData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
};

导航生命周期事件

生命周期事件的导航侦听器使您可以查看屏幕是否重新聚焦。 https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

您可以听四种不同的事件：

• willFocus-屏幕将聚焦
• didFocus-屏幕聚焦（如果有过渡，则过渡完成）
• willBlur-屏幕将无法对焦
• didBlur-屏幕未聚焦（如果存在过渡，则过渡完成）

在屏幕上，您可以让听众捕捉屏幕何时聚焦或何时模糊。您可以在componentDidMount中注册侦听器，并在componentWillUnmount中取消订阅（如果您不希望发生内存泄漏，这很重要）。

componentDidMount () {
  this.willFocusSubscription = this.props.navigation.addListener(
    'willFocus',
    payload => {
      console.debug('willFocus', payload);
      // you could make function calls here to retrieve values from AsyncStorage
      // which could then update the values that you have in state.
    }
  );
}

componentWillUnmount () {
  if(this.willFocusSubscription) {
     this.willFocusSubscription.remove();
  }
}

或者，您可以在屏幕之间传递值和函数。但是我认为该解决方案非常简单，这意味着您不必使用AppState更改即可捕获值，因为所有值都将被更新并存储在AsyncStorage中。