Question

我有一个react-native应用程序，其中我使用react-native-qrcode-scanner开发了扫描仪功能。但是，当我尝试扫描数据时，出现以下错误-

error: can't find variable navigation

我在授权行的onSuccess方法中看到此错误。我的代码-

import React, { Component } from 'react';
import {
    Text,
    View,
    Image,
    TouchableOpacity,
    Linking
} from 'react-native';
import styles from '../assets/style';
import QRCodeScanner from 'react-native-qrcode-scanner';

export default class ScanScreen extends Component {

    onSuccess(scanEvent) {
        this.props.navigation.navigate("Result", {
            'accessKey': scanEvent.data,
            'authorizationToken':navigation.getParam('authorizationToken', undefined), 
            "userData": navigation.getParam('userData', undefined),
            "methodName": "fetchData"
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <QRCodeScanner
                    onRead={this.onSuccess.bind(this)}
                />
            </View>
        );
    }
}

任何想法，我在这里想念的是什么。非常感谢您的帮助。谢谢。

Answer 1

确保您的屏幕已在react-navigation配置中注册（遵循本指南：找不到变量导航）。

或通过HOC withNavigation：https://reactnavigation.org/docs/en/with-navigation.html将导航道具传递给它。相反，export default class ScanScreen extends Component执行class ScanScreen extends Component，并在文件末尾执行

export default withNavigation(ScanScreen);

别忘了导入高阶组件：import { withNavigation } from 'react-navigation';

还要确保所有本机部分都正确链接。例如react-native-gesture-handle（https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#linking）。

Answer 2

导航必须是道具的一部分，因此使用this.props.navigation访问导航即可解决此问题。

React-native QR码扫描仪抛出错误

2 个答案: