获取 ReferenceError：找不到变量：由于 onPress 中的方法而导致的 TouchableOpacity

Posted 2023-03-14

【中文标题】获取 ReferenceError：找不到变量：由于 onPress 中的方法而导致的 TouchableOpacity

【英文标题】：Getting ReferenceError: Can't find variable: TouchableOpacity due to a method in onPress

【发布时间】：2021-02-02 22:56:42

【问题描述】：

这是参考反应原生应用程序。 我创建了一个导航参考文件，用于从不属于导航器的组件导航到屏幕。 下面是它的代码。

import NavigationActions from 'react-navigation';

export const setNavigator = (nav) => 
    navigator = nav;


export const navigate = (routeName, params) => 
    navigator.dispatch(
        NavigationActions.navigate(
            routeName: routeName,
            params: params
        )
    );
;

要使用它，我只需导入 import navigate from '../../src/navigationRef'; 和navigate('ScreenName');

我有一个单独的组件，每当点击这个组件时，它应该导航到 QuestionScreen，下面是代码

return (
        <TouchableOpacity  onPress=() => navigate('QuestionScreen')>
        <View style=marginTop: 8, backgroundColor: 'white', padding: 8>
            <Text style=styles.questionStyle >question</Text>
            <View style= flexDirection: 'row', justifyContent: 'space-between', marginTop: 16  >
                <Text style=styles.nameStyle >name</Text>
                <Text style=styles.timeStyle > 2 days ago </Text>
            </View>
            <View style= flexDirection: 'row', marginTop: 16, justifyContent: 'space-between'  >
                <View style= flexDirection: 'row'  >
                    <Text style= fontSize: 12, color: '#6C6C6C'  >Answers noOfAnswers</Text>

                    <View style=flexDirection: 'row', marginLeft: 16>
                        /* <MaterialIcons name="trending-up" size=24 color="#CA534C" /> */
                        <Image   style=width: 24, height:  24 source= require('../../assets/heart-pulse-line.png') />
                        <Text style= fontSize: 12, color: '#6C6C6C'  >noOfInsightfuls</Text>
                    </View>
                </View>
                <Text style= fontSize: 12, fontWeight: 'bold', color: '#CA534C'  >tag</Text>
            </View>
        </View>
        </TouchableOpacity>
    );

点击此组件会导致以下错误

ReferenceError：找不到变量：TouchableOpacity

node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error node_modules\expo\build\environment\react-native-logs.fx.js:27:4 错误 node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError ErrorUtils.setGlobalHandler$argument_0 中的 node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 node_modules\regenerator-runtime\runtime.js:63:36 在 tryCatch node_modules\regenerator-runtime\runtime.js:293:29 在调用 node_modules\regenerator-runtime\runtime.js:63:36 在 tryCatch node_modules\regenerator-runtime\runtime.js:154:27 在调用 PromiseImpl.resolve.then$argument_0 中的 node_modules\regenerator-runtime\runtime.js:164:18 node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 在 tryCallOne node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 在 setImmediate$argument_0 _callTimer 中的 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 _callImmediatesPass 中的 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 在 callImmediates __callImmediates 中的 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 __guard$argument_0 中的 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 __guard 中的 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue

[本机代码]：flushedQueue 中为空 [本机代码]：invokeCallbackAndReturnFlushedQueue 中为空

如果我在 TouchableOpacity 的 onPress 方法中使用console.log，它可以正常工作。*

【问题讨论】：

你导入 TouchableOpacity 了吗？

创建另一个函数并在 onPress 中调用

const navigateToQuestionScreen = () => navigate('QuestionScreen'); , navigateToQuestionScreen() >，现在它正在工作，如果你知道它的原因，请发表评论。

@GuruparanGiritharan，是的，我已经导入了它，我做了一个解决方法，现在它正在工作。不过感谢您的调查。

【参考方案1】：

你必须从 react native 导入 TouchableOpacity ，如下所示

import TouchableOpacity from 'react-native;