![build status](https://github.com/name-q/react-native-tools-next/actions/workflows/test.yml/badge.svg?branch=master&raw=true)
简体中文
yarn add react-native-tools-next
yarn add @react-navigation/native # >= 6.0.0
yarn add react-native-permissions mitt dayjs
package name |
version |
react-native version |
react-native-tools-next |
2.1.9+ |
0.65.0+ |
Example
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();
}
}
};
}
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(),
},
],
);
});
}
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</..>
</...>
</>
)
}
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();
}
}
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
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
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