ReactNative项目中实现锁住手机屏幕功能

　　设置PinCode锁住屏幕时是很常见的场景，下面教程是使用react-native-pincode开源组件来实现react-native锁住手机屏幕的功能。 该组件官方地址：
　　https://github.com/jarden-digital/react-native-pincode安装： yarn add @haskkor/react-native-pincode @react-native-community/async-storage react-native-keychain@5.0.1
　　2. 因为组件使用了系统提供的VIBRATE，所以在android/app/src/main/AndroidManifest.xml文件夹添加权限： 
　　3.使用： import React, {useCallback, useEffect, useState} from ＂react＂; import {View, StyleSheet} from ＂react-native＂; import {RouterStackScreenProps} from ＂../../types/types＂; import PINCode, {hasUserSetPinCode} from ＂@haskkor/react-native-pincode＂; import {setShowPinLock} from ＂../../redux/reducers/userReducer＂; import {useAppDispatch} from ＂../../hooks/redux-hooks＂;  type LoginScreenProps = RouterStackScreenProps<＂LoginScreen＂>;  const LoginScreen = ({route, navigation}: LoginScreenProps) => {   const dispatch = useAppDispatch();    const [pinCodeStatus, setPinCodeStatus] = useState(false);    const hasPin = useCallback(async () => {     const data = await hasUserSetPinCode();     setPinCodeStatus(data);   }, []);    useEffect(() => {     hasPin().catch(console.error);   }, [hasPin]);    console.log(＂hasPin:＂, hasPin());    return (             {           dispatch(setShowPinLock(false));           navigation.navigate(＂TabNavigator＂, {             screen: ＂HomeScreen＂,           });         }}       />        ); };  export default LoginScreen;  const styles = StyleSheet.create({   container: {     flex: 1,     backgroundColor: ＂#fff＂,   }, });
　　代码说明： PINCode组件的status传的参数，如果是choose表示第一次设置pincode，需要用户输入和确认pincode，如果是enter表示之前已经设置过pincode。每次进入页面，使用useEffect调用组件提供的hasUserSetPinCode来判断是否已经设置过pincode，从而动态传入status参数 finishProcess是组件成功输入pincode后回调函数，使用react-navigation提供navigate跳转到tab底部栏的home页面。因为我使用了redux中的showPinLock变量来做动态路由判断，这时还需要更改showPinLock变量的值（这点要根据实际项目需求灵活调整，可有可无）