获取引用错误：找不到变量：由于 onPress 中的方法而导致的可触摸不透明度

Question

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

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

registerError中的node_modules\areact native\Libraries\LogBox\LogBox.js:148:8errorImpl中的node_modules\react native\Libraries\LogBox\LogBox.js:59:8console.error中的node_modules\react native\Libraries\LogBox\LogBox.js:33:4node_modules\expo\build\environment\areact本机日志.fx.js:27:4错误reportException中的node_modules\react native\Libraries\Core\ExceptionsManager.js:104:6handleException中的node_modules\react native\Libraries\Core\ExceptionsManager.js:171:19handleError中的node_modules\react native\Libraries\Core\setUpErrorHandling.js:24:6node_modules\expo error recovery\build\ErrorRecovery.fx.js:ErrorUtils.setGlobalHandler$argument_0中的9:32tryCatch中的node_modules\regenerator runtime\runtime.js:63:36invoke中的node_modules\regenerator runtime\runtime.js:293:29tryCatch中的node_modules\regenerator runtime\runtime.js:63:36invoke中的node_modules\regenerator runtime\runtime.js:154:27PromiseImpl.resolve.then$argument_0中的node_modules\regenerator runtime\runtime.js:164:18node_modules\react native\node_modules\promee\setimmediate\core.js:37:13在tryCallOne中node_modules\react native\node_modules\promee\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:14callImmediates中的node_modules\react native\Libraries\Core\Timers\JSTimers.js:441:30__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

• [本机代码]：flushdQueue中为null
• [本机代码]：invokeCallbackAndReturnFlushedQueue中为null

如果我在TouchableOpacity的onPress方法中使用console.log，它工作得很好。*

Answer 1

您必须从react native导入TouchableOpacity，如以下

import {TouchableOpacity} from 'react-native;