React Native中Screen awake组件退出页面后Idle timer失效的修复问题

• 缺失组件卸载时的恢复逻辑：当前代码仅在render方法中判断激活状态时禁用息屏，离开页面导致组件销毁时，没有主动重置系统息屏逻辑，idle timer始终处于禁用状态
• 未监听激活状态变化：如果传入的activateComponent属性从true变为false，没有对应的逻辑恢复息屏
• 操作执行时机不合理：render方法会在组件每次重渲染时执行，重复调用setIdleTimerDisabled属于非预期操作，不符合React生命周期规范

通过React类组件的生命周期方法补充状态监听和清理逻辑：

1. 组件挂载时，根据传入的激活属性判断是否禁用息屏
2. 组件更新时，监听activateComponent属性的变化，状态切换时对应执行禁用/恢复息屏操作
3. 组件卸载时（即用户离开当前页面），强制恢复系统默认息屏逻辑，避免全局状态被篡改
4. 增加重复操作判断，只有状态实际变化时才调用原生接口，避免不必要的执行

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
import IdleTimerManager from 'react-native-idle-timer'

// 注：原组件名拼写错误SceenAwake修正为ScreenAwake，可根据需求自行调整
class ScreenAwake extends Component {
  componentDidMount() {
    // 组件挂载时根据props判断是否激活
    if (this.props.activateComponent) {
      this.activate()
    }
  }

  componentDidUpdate(prevProps) {
    // 激活状态变化时才执行对应操作
    if (prevProps.activateComponent !== this.props.activateComponent) {
      this.props.activateComponent ? this.activate() : this.deactivate()
    }
  }

  componentWillUnmount() {
    // 组件卸载时强制恢复息屏逻辑
    this.deactivate()
  }

  activate() {
    IdleTimerManager.setIdleTimerDisabled(true);
  }
  
  deactivate() {
    IdleTimerManager.setIdleTimerDisabled(false);
  }
    
  render() {
    return(
      <View style={styles.wrapper}>
        <Text>21th test</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default ScreenAwake

• 如果你的页面使用了React Navigation之类的路由库，页面切后台/切栈时组件可能不会立即卸载，可以结合路由的页面聚焦/失焦事件补充调用activate/deactivate逻辑
• 多页面同时使用该组件时，建议全局维护一个禁用计数，避免某一个组件销毁就重置全局状态，导致其他页面的防息屏功能失效

内容的提问来源于stack exchange，提问作者Jimmy Noujaim