ExpoLocalAuthentication React Native 错误

Question

我尝试在我的应用程序中使用 expo 本地身份验证来使用指纹身份验证。我在使用 LocalAuthentication.authenticateAsync() 时遇到错误我已附上错误截图供您参考。此代码中断恰好发生在

const results = await LocalAuthentication.authenticateAsync();

错误截图

FingerPrintModal.js

import React from 'react';
import { View, Text, StyleSheet, Modal, TouchableOpacity } from 'react-native';
import * as LocalAuthentication from 'expo-local-authentication';
import { Icon, Button } from 'native-base';

export default class FingerPrintModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            authenticated: false,
            failedCount: 0
        }
        console.log("Inside FingerPrintModal");
        this.setModalVisible = this.setModalVisible.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    setModalVisible(visible) {
        this.setState({ modalVisible: visible, failedCount: 0 });
    }

    closeModal() {
        this.setModalVisible(false);
    }

    scanFingerPrint = async () => {
        console.log("scan fingerprint");
        this.setState({ failedCount: 0 });
        try {
            console.log("before results");
            const results = await LocalAuthentication.authenticateAsync();
            console.log("after results");
            if (results.success) {
                this.props.onSuccess(true);
                this.setState({
                    modalVisible: false,
                    authenticated: true,
                    failedCount: 0,
                });
            } else {
                this.setState({ failedCount: this.state.failedCount + 1 });
            }
        } catch (e) {
            console.log(e);
        }
    };

    render() {
        return (
        <Modal
            animationType="slide"
                transparent={false}
                visible={this.state.modalVisible}
                onShow={this.scanFingerPrint}>
                <View style={styles.modal}>
                    <View style={styles.iconView}>
                        <Icon name="fingerprint" type="MaterialIcons" style={styles.icon} />
                        <View style={{ marginTop: 40 }}>
                            <Text style={styles.msgTxt}>Waiting for finger print</Text>
                        </View>
                        {this.state.failedCount > 0 ?
                            <View style={{ marginTop: 40 }}>
                                <TouchableOpacity onPress={this.scanFingerPrint}>
                                    <Text style={[styles.msgTxt, { color: 'red' }]}>Please try again</Text>
                                </TouchableOpacity>
                            </View>
                            :
                            null
                        }
                    </View>
                    <View style={styles.buttonView}>
                        <Button rounded style={styles.btn} onPress={this.closeModal}>
                            <Text style={styles.btnTxt}>Cancel</Text>
                        </Button>
                    </View>
                </View>
            </Modal>
        )
    }
}
const styles = StyleSheet.create({
    modal: {
        flex: 1,
        height: '100%',
        width: '100%',
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    },
    iconView: {
        flex: 3.5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    icon: {
        fontSize: 80,
        color: 'black'
    },
    msgTxt: {
        fontSize: 16,
        color: 'black',
        fontStyle: 'italic'
    },
    buttonView: {
        flex: 1,
        width: '100%',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    btn: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 200,
        marginBottom: 80
    },
    btnTxt: {
        color: 'white',
        fontSize: 14,
        fontStyle: 'italic'
    }
});

package.json

{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "axios": "^0.19.2",
    "expo": "~37.0.3",
    "expo-google-app-auth": "^8.1.0",
    "expo-linking": "^1.0.3",
    "expo-local-authentication": "~9.0.0",
    "expo-splash-screen": "^0.2.3",
    "expo-updates": "~0.2.0",
    "native-base": "^2.13.12",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-banner-carousel": "^1.0.3",
    "react-native-elements": "^2.0.2",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-unimodules": "~0.9.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.3.9",
    "react-navigation-drawer": "^2.4.13",
    "react-navigation-stack": "^2.7.0",
    "react-navigation-tabs": "^2.8.13"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-jest": "~25.2.6",
    "jest": "~25.2.6",
    "react-test-renderer": "~16.9.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

Answer 1

将您的应用程序更新到最新版本的 expo（在我的例子中是 38）和最新版本的 expo-local-authentication，错误应该会消失。

ExpoLocalAuthentication React Native 错误

ExpoLocalAuthentication React Native Error

javascript

react-native

authentication

expo

fingerprint