React Native Tools Next

简体中文

Install

yarn add react-native-tools-next

Peer Dependencies

yarn add @react-navigation/native # >= 6.0.0
yarn add react-native-permissions mitt dayjs

Support

| package name | version | react-native version | | ----------------------- | ------- | -------------------- | | react-native-tools-next | 2.1.8+ | 0.65.0+ |

Usage

Example

Global Hooks

import {
  useAppActive,
  useAppInactive,
  usePermissions,
} from 'react-native-tools-next';
import { PERMISSIONS } from 'react-native-permissions';

export default function App() {
  // Called when the application from background to foreground
  useAppActive(() => {});

  // Called when the application from foreground to background
  useAppInactive(() => {});

  // Check whether multiple permissions are open
  // or request multiple permissions
  // status ()=>Promise<boolean> permission enabled?
  // request ()=>Promise<void> Apply to the system for permission
  // openSettings ()=>Promise<void> open setting method
  const [status, request, openSettings] = usePermissions([
    PERMISSIONS.IOS.CAMERA,
    PERMISSIONS.ANDROID.CAMERA,
  ]);
  const handleClickOrUseShow = async () => {
    let pass = await status();
    if (!pass) {
      try {
        await request();
      } catch {
        openSettings();
      }
    }
  };
}

Page/Screen Hooks

import {
  useMount,
  useShow,
  useHide,
  useUnmount,
  useResize,
  useWaitReturn,
} from 'react-native-tools-next';

export default function Page() {
  // Called when the component is mounted
  useMount(() => {});

  // Called when the page is displayed
  // or in the application from background to foreground
  useShow(() => {});

  // Called when the page is hidden or in the application
  // from foreground to background
  useHide(() => {});

  // Called when the component is unmounted
  useUnmount(() => {});

  // Called after the page window resize
  useResize(() => {});

  // Intercept return to make the return controllable
  useWaitReturn(exit => {
    Alert.alert(
      'useWaitReturn Demo',
      'Are you sure to discard them and leave the screen?',
      [
        {
          text: "Don't leave",
          style: 'cancel',
          onPress: () => {},
        },
        {
          text: 'Discard',
          style: 'destructive',
          onPress: () => exit(),
        },
      ],
    );
  });
}

Util

msg

import {
  msg
} from 'react-native-tools-next';

// msg => {on,off,emit,all,exist}
// Implement global messages:
//   subscribe, unsubscribe, and send messages to subscription

export function PageA() {
  React.useEffect(() => {
    const subscribe = msg.on('A', (message) => {
      Alert.alert(
        `pageA message received:::${message}`
      );
    });
    // uninstall subscribe
    return subscribe.remove;
  }, []);
  ...
}

export function PageB(){
    ...
    return (
      <>
        <... onPress={
          () => {
            const result = msg.emit('A', 'hellow pageA');
            console.log(result, '< boolean');
          }}
        >
          <..>send a message to the pageA</..>
        </...>
        <... onPress={() => msg.off('A')}>
          <..>uninstall pageA subscribe</..>
        </...>
      </>
    )
}

requestPermissions

import { requestPermissions } from 'react-native-tools-next';
import { PERMISSIONS, RESULTS } from 'react-native-permissions';
// Apply to the system for permission that has not been opened
// When obtaining permission fails, return to the open setting method
const handleClickOrUseShow = async() => {
  try {
     await requestPermissions(
       [PERMISSIONS.IOS.CAMERA, PERMISSIONS.ANDROID.CAMERA],
       RESULTS.GRANTED,
     );
   } catch (error:any) {
     error.openSettings();
   }
}

debounce

import { debounce } from 'react-native-tools-next';
/**
 * Debouncing refers to canceling the previous operation and restarting the timer
 * if an event is triggered again within a certain time period.
 * It is usually used to handle rapid button clicks,
 * and other scenarios.
 */
const handleClick = debounce(() => console.log(1), 1000);

// immediately
handleClick(); // 1
handleClick(); // undefined
handleClick(); // undefined
handleClick(); // undefined
handleClick(); // undefined
//  Pause for one second later
handleClick(); // 1
handleClick(); // undefined
handleClick(); // undefined

throttle

import { throttle } from 'react-native-tools-next';
/**
 * Throttling refers to executing a function only once within a certain period of time,
 * usually used to handle events that are frequently triggered,
 * such as window scrolling, mouse movement, and so on.
 */
const listenForScrolling = throttle(() => new Date().getSeconds(), 2000);

// immediately
listenForScrolling(); // 1
listenForScrolling(); // undefined
listenForScrolling(); // undefined
listenForScrolling(); // 4
listenForScrolling(); // undefined
listenForScrolling(); // undefined
listenForScrolling(); // 7

calculation

import {
  add,
  subtract,
  multiply,
  divide,
  toFixedNoRound,
  toFixedRound,
} from 'react-native-tools-next';

//  0.1+0.2  // 0.30000000000000004
add(0.1, 0.2); // 0.3

// 0.3-0.1  // 0.19999999999999998
subtract(0.3, 0.1); // 0.2

// 0.1*0.2  // 0.020000000000000004
multiply(0.1, 0.2); // 0.02

// 0.3/0.1  // 2.9999999999999996
divide(0.3, 0.1); // 3

// Gets the specified number of digits, and the result is not rounded.
// Returns the result of numeric type,
// which is generally used in conjunction with toFixed to beautify the display effect
// 0.19999999999999998.toFixed(2)  // '0.20'
toFixedNoRound(0.19999999999999998, 2); // 0.19

// Get the specified number of digits and round the result.
// 0.19999999999999998.toFixed(2)  // '0.20'
toFixedRound(0.19999999999999998, 2); // 0.2