React Native中使用lockstate追踪锁屏/解锁事件的实现疑问

嘿，我来帮你梳理下这个需求的实现思路，顺便修正你代码里的小问题～

要不要结合AppState？ #

其实react-native-lockstate已经能直接监听锁屏、解锁的状态变化，但结合AppState会让你的统计逻辑更严谨：

• 单纯用锁屏事件只能知道手机是否解锁，但没法区分“手机解锁但App在后台挂着”和“App前台活跃使用”的场景
• 结合AppState后，你能精准统计App实际在前台的使用时长，而不是手机解锁后的总时长，这更符合“屏幕使用时长”的统计需求

你的代码修正与完整实现 #

先指出原代码里的小问题：handleLockStateChange里的语法错误（this.state.lockState(.match(/lockcomplete/))多了个多余的括号），同时缺少解锁次数、时长统计的核心逻辑，以及AppState的监听逻辑。下面是补全后的完整代码：

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

export default class LockStateCheck extends Component {
  state = {
    lockState: RNLockState.currentState,
    appState: AppState.currentState,
    unlockCount: 0, // 解锁次数统计
    sessionStartTime: null, // 当前前台会话的开始时间
    totalScreenTime: 0, // 累计前台使用时长（毫秒）
  };

  componentDidMount() {
    // 监听锁屏状态变化
    RNLockState.addEventListener('change', this.handleLockStateChange);
    // 监听App前后台状态变化
    AppState.addEventListener('change', this.handleAppStateChange);
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，防止内存泄漏
    RNLockState.removeEventListener('change', this.handleLockStateChange);
    AppState.removeEventListener('change', this.handleAppStateChange);
  }

  handleAppStateChange = (nextAppState) => {
    const { appState, sessionStartTime } = this.state;

    // 当App从后台切回前台时，记录会话开始时间
    if (appState.match(/inactive|background/) && nextAppState === 'active') {
      this.setState({ sessionStartTime: Date.now() });
    }

    // 当App从前台切到后台时，计算本次会话时长并累加
    if (appState === 'active' && nextAppState.match(/inactive|background/) && sessionStartTime) {
      const sessionDuration = Date.now() - sessionStartTime;
      this.setState(prevState => ({
        totalScreenTime: prevState.totalScreenTime + sessionDuration,
        sessionStartTime: null,
      }));
    }

    this.setState({ appState: nextAppState });
  };

  handleLockStateChange = (currentLockState) => {
    const { lockState, unlockCount, sessionStartTime } = this.state;

    // 监听从锁屏到解锁的状态变化，统计解锁次数
    if (lockState === 'lockcomplete' && currentLockState === 'unlocked') {
      this.setState(prevState => ({
        unlockCount: prevState.unlockCount + 1,
      }));
      // 如果解锁后App本来就在前台，重新记录会话开始时间
      if (this.state.appState === 'active') {
        this.setState({ sessionStartTime: Date.now() });
      }
    }

    // 监听锁屏事件，此时如果App在前台，结束当前会话时长统计
    if (currentLockState === 'lockcomplete' && sessionStartTime) {
      const sessionDuration = Date.now() - sessionStartTime;
      this.setState(prevState => ({
        totalScreenTime: prevState.totalScreenTime + sessionDuration,
        sessionStartTime: null,
      }));
    }

    this.setState({ lockState: currentLockState });
  };

  render() {
    const { unlockCount, totalScreenTime } = this.state;
    // 把毫秒转换成友好的时分秒格式
    const formatDuration = (ms) => {
      const seconds = Math.floor(ms / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);
      return `${hours}h ${minutes % 60}m ${seconds % 60}s`;
    };

    return (
      <>
        <Text>累计解锁次数：{unlockCount}</Text>
        <Text>累计前台使用时长：{formatDuration(totalScreenTime)}</Text>
      </>
    );
  }
}

核心逻辑说明 #

• 解锁次数统计：捕捉lockcomplete到unlocked的状态切换，每次触发就累加计数
• 屏幕使用时长统计：结合AppState和锁屏事件，在App前台活跃时记录开始时间，在App切后台或手机锁屏时计算本次时长并累加，避免漏统计或重复统计
• 内存泄漏防护：组件卸载时必须移除所有监听事件，这是React Native开发的基本规范

内容的提问来源于stack exchange，提问作者Vanessa Vilela