React-Native实现驾驶状态检测及警告模态框技术问询

一、可用的第三方包 #

• react-native-activity-recognition：基于Android的Activity Recognition和iOS的Core Motion原生API封装，能直接识别步行、驾驶等活动状态，是这类需求的主流选择。
• 备选方案：若想自定义判断逻辑，可使用react-native-sensors获取加速度、陀螺仪数据，但需要自行处理驾驶行为的特征判断，复杂度较高，不推荐新手尝试。

二、react-native-activity-recognition 集成与模态框实现步骤 #

1. 安装与权限配置 #

首先安装依赖：

npm install react-native-activity-recognition
# 或 yarn add react-native-activity-recognition

Android 配置

在android/app/src/main/AndroidManifest.xml中添加权限：

<uses-permission android:name="com.google.android.gms.permission.ACTIVITY_RECOGNITION" />
<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />

iOS 配置

在ios/项目名/Info.plist中添加运动权限描述：

<key>NSMotionUsageDescription</key>
<string>需要访问您的运动数据以检测驾驶状态，保障出行安全</string>

2. 核心代码实现（含模态框） #

以下是完整的组件示例，包含权限请求、活动监听、驾驶状态判断和警告模态框：

import React, { useState, useEffect } from 'react';
import { View, Modal, Text, Button, StyleSheet } from 'react-native';
import ActivityRecognition from 'react-native-activity-recognition';

const DrivingWarning = () => {
  const [showWarningModal, setShowWarningModal] = useState(false);

  useEffect(() => {
    let activitySubscription;

    // 请求活动识别权限
    const requestPermission = async () => {
      const isGranted = await ActivityRecognition.requestPermission();
      if (isGranted) {
        startDetection();
      }
    };

    // 启动活动监听
    const startDetection = () => {
      // 每15秒获取一次活动数据（可根据需求调整间隔，避免过于频繁耗电）
      activitySubscription = ActivityRecognition.startActivityUpdates(15000, (activities) => {
        // 取置信度最高的活动结果
        const topActivity = activities.sort((a, b) => b.confidence - a.confidence)[0];
        
        // 兼容Android（IN_VEHICLE）和iOS（Automotive）的驾驶状态标识
        const isDriving = (topActivity.type === 'IN_VEHICLE' || topActivity.type === 'Automotive') 
                          && topActivity.confidence >= 70; // 设置置信度阈值，减少误判
        
        setShowWarningModal(isDriving);
      });
    };

    requestPermission();

    // 组件卸载时取消监听
    return () => {
      if (activitySubscription) {
        activitySubscription.remove();
      }
    };
  }, []);

  return (
    <View style={styles.container}>
      {/* 你的应用主内容 */}
      
      <Modal
        animationType="fade"
        transparent={true}
        visible={showWarningModal}
        onRequestClose={() => setShowWarningModal(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>安全提示</Text>
            <Text style={styles.modalText}>您似乎正在驾驶，请停车后再操作应用，确保出行安全</Text>
            <Button 
              title="我已知晓" 
              onPress={() => setShowWarningModal(false)}
              color="#007AFF"
            />
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
  },
  modalContent: {
    width: '85%',
    padding: 25,
    backgroundColor: 'white',
    borderRadius: 12,
    alignItems: 'center',
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 12,
  },
  modalText: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 20,
    lineHeight: 22,
  },
});

export default DrivingWarning;

3. 关键注意事项 #

• 置信度阈值：必须设置置信度阈值（示例中为70），系统识别偶尔会出现低置信度的误判，避免频繁弹出提示打扰用户。
• 平台兼容：Android和iOS返回的驾驶状态标识不同，需同时处理IN_VEHICLE和Automotive两种类型。
• 监听间隔：建议设置10-30秒的监听间隔，过短会增加设备电量消耗。

三、优化方向 #

• 后台监听：若需要在应用后台也能检测驾驶状态，Android需配置后台服务，iOS需在Xcode中开启Background Modes下的Motion Updates选项。
• 降低误判：可结合react-native-geolocation-service获取实时速度，当速度超过20km/h且识别为驾驶状态时，再弹出提示，进一步提升准确率。
• 用户选择权：可增加“10分钟内不再提示”的按钮，避免重复打扰。

内容的提问来源于stack exchange，提问作者Jennifer De Goede