React Native Idle Timer: Kích hoạt và Vô hiệu hóa Bộ đếm Thời gian Chờ màn hình

react-native-idle-timer

Một cầu nối đa nền tảng cho phép bạn kích hoạt và vô hiệu hóa bộ đếm thời gian chờ màn hình trong ứng dụng React Native của bạn.

Cài đặt

yarn add react-native-idle-timer

Liên kết

Tự động

react-native link react-native-idle-timer

Thủ công

iOS

. Trong “Dẫn đường Dự án” của XCode, nhấp chuột phải vào thư mục Thư viện của dự án của bạn ➜ Thêm Tệp vào <...>
. Đi đến node_modules ➜ react-native-idle-timer ➜ ios ➜ chọn RNIdleTimer.xcodeproj
. Thêm libRNIdleTimer.a vào Build Phases -> Liên kết Thư viện nhị phân

Android

. trong android/settings.gradle

...
include ':react-native-idle-timer'
project(':react-native-idle-timer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-idle-timer/android')

. trong android/app/build.gradle thêm:

dependencies {
  ...
  compile project(':react-native-idle-timer')
}

. và cuối cùng, trong android/src/main/java/com/{TÊN_ỨNG_DỤNG_CỦA_BẠN}/MainActivity.java thêm:

//...
import com.marcshilling.idletimer.IdleTimerPackage; // <--- This!

//...
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new IdleTimerPackage() // <---- and This!
  );
}

Sử dụng

Trong mã javascript React Native của bạn, đưa vào mô-đun nguyên gốc:

import IdleTimerManager from 'react-native-idle-timer';

Để vô hiệu hóa bộ đếm thời gian chờ trong khi một thành phần cụ thể được gắn kết:

Thành phần lớp

componentWillMount() {
  IdleTimerManager.setIdleTimerDisabled(true);
}

componentWillUnmount() {
  IdleTimerManager.setIdleTimerDisabled(false);
}

Thành phần hàm

useEffect(() => {
  IdleTimerManager.setIdleTimerDisabled(true);

  return () => IdleTimerManager.setIdleTimerDisabled(false);
}, [])

Nếu bạn có nhiều thành phần có trách nhiệm tương tác với bộ đếm thời gian chờ, bạn có thể truyền một thẻ như tham số thứ hai:

useEffect(() => {
  IdleTimerManager.setIdleTimerDisabled(true, "video");

  return () => IdleTimerManager.setIdleTimerDisabled(false, "video");
}, [])

Nếu bạn cần tương tác từ phía Android hoặc iOS nguyên thủy:

Android

IdleTimerManager.activate(activity, "video");
IdleTimerManager.deactivate(activity, "video");

iOS

[IdleTimerManager activate:@"video"];
[IdleTimerManager deactivate:@"video"];

Chi tiết Tải xuống:

Tác giả: marcshilling
Mã Nguồn: https://github.com/marcshilling/react-native-idle-timer

Giấy phép: MIT license