React Native - 编辑其他组件的状态

debugcn 发表于 Dev

艾哈迈德·尼扎尔

我想通过运行检查应用程序当前状态是否处于活动状态的函数来编辑其他组件的状态，这意味着每次应用程序进入前台时它都会运行。

let d = new Date().getHours();
let title = messages[`_${d}`].message;

function getAppState() {
  AppState.addEventListener("change", (state) => {
    if(state == "active") {
      d = new Date().getHours();
      title = messages[`_${d}`].message;
      // App.setState({ text: title }); **Not working!
      console.log(title);
    }
  });
}

export default class App extends React.Component {
  constructor() {
    super();
    this.state = { text: title };
    getAppState();
  }
  render() {
    return (
      <View>
        <StatusBar hidden={ true } />
        <Text style={styles.title}>{title}</Text>
      </View>
    );
  }
}

我想根据小时更改文本的值。

混搭

我没有一个环境来测试这个，但我会这样做：

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      text: title
    };

    // Bind updateTile() so `this` corresponds tho the react component and things
    // like `this.setState()` are available. Otherwise `this` would be `AppState`
    this.updateTitle = this.updateHour.bind(this);

  }

  componentWillMount() {
    // Listen for the event
    AppState.addEventListener("change", this.updateTitle);
  }

  updateTitle(state) {
    if (state == "active") {
      const d = new Date().getHours();
      const title = messages[`_${d}`].message;
      this.setState({
        text: title
      });
      console.log(title);
    }
  }

  render() {
    return (
        <View >
        <StatusBar hidden={true} />
        <Text style = {styles.title}>{title}</Text>
      </View >
    );
  }
}

如果你想updateTitle()成为另一个功能而不是Component我的一部分，我会这样做：

const updateComponentTitle = state => {
  if (state == "active") {
    const d = new Date().getHours();
    const title = messages[`_${d}`].message;
    this.setState({
      text: title
    });
    console.log(title);
  }
}


export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      text: title
    };

    // Bind updateTile() so `this` corresponds tho the react component and things
    // like `this.setState()` are available. Otherwise `this` would be `AppState`
    this.updateTitle = udpateComponentTitle.bind(this);

  }

  componentWillMount() {
    // Listen for the event
    AppState.addEventListener("change", this.updateTitle);
  }

  render() {
    return (
        <View >
        <StatusBar hidden={true} />
        <Text style = {styles.title}>{title}</Text>
      </View >
    );
  }

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。