React Native应用后台时修改State不生效问题求助

我完全懂你遇到的这个困扰——后台切换的日志能正常打出来，但界面就是纹丝不动，这其实是React Native的后台渲染机制和你状态判断的小问题导致的。

问题出在哪？ #

1. 后台渲染限制：当App进入background状态时，React Native会暂停UI层面的渲染更新，这时候你调用setState虽然能更新组件内部状态，但不会立刻触发界面刷新，得等切回前台才会生效。
2. 状态判断用错了对象：你在回调里用AppState.currentState判断状态，但这个值可能还没同步更新到最新状态，真正的当前状态应该是回调参数里的nextAppState。

修复后的完整代码 #

import React, { Component } from 'react';
import { AppState, Text, View } from 'react-native';

export default class AppStateExample extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      name: 'not change' 
    };
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    // 用回调里的nextAppState判断最新状态，而不是currentState
    if (nextAppState === 'background') {
      console.log('background mode');
      // 后台设置状态，状态会被保留，切回前台时自动渲染
      this.setState({ name: 'back' });
    }
    if (nextAppState === 'active') {
      console.log('active mode');
      // 如果切回前台后还是没刷新，可以加这行强制触发重渲染
      // this.setState(prevState => ({ ...prevState }));
    }
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>State Name : {this.state.name}</Text>
      </View>
    );
  }
}

额外说明 #

• 当你把应用切回前台时，React Native会自动触发组件的重新渲染，这时候后台设置的状态就会显示在界面上了。如果偶尔还是没生效，可以在active状态的判断里加一行无变更的setState，强制触发重渲染（就是代码里注释的那行）。
• 以后用AppState的时候，记得优先用回调参数里的nextAppState来判断状态，AppState.currentState的更新可能有延迟，容易导致判断出错。

内容的提问来源于stack exchange，提问作者Reza Mazarlou