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

Question

This is with reference to a react native app. I have created a navigation reference file to navigate to screens from components not part of navigator. Below is the code for it.

import { NavigationActions } from 'react-navigation';

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

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

to use it I just import import {navigate} from '../../src/navigationRef'; and navigate('ScreenName');

I have a made one component, whenever this component is clicked it should navigation to QuestionScreen, below is the code

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>
    );

tapping this component results in below error

ReferenceError: Can't find variable: 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 in error 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 node_modules\\expo-error-recovery\\build\\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0 node_modules\\regenerator-runtime\\runtime.js:63:36 in tryCatch node_modules\\regenerator-runtime\\runtime.js:293:29 in invoke node_modules\\regenerator-runtime\\runtime.js:63:36 in tryCatch node_modules\\regenerator-runtime\\runtime.js:154:27 in invoke node_modules\\regenerator-runtime\\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0 node _modules\\react-native\\node_modules\\promise\\setimmediate\\core.js:37:13 in tryCallOne node_modules\\react-native\\node_modules\\promise\\setimmediate\\core.js:123:24 in setImmediate$argument_0 node_modules\\react-native\\Libraries\\Core\\Timers\\JSTimers.js:130:14 in _callTimer node_modules\\react-native\\Libraries\\Core\\Timers\\JSTimers.js:181:14 in _callImmediatesPass node_modules\\react-native\\Libraries\\Core\\Timers\\JSTimers.js:441:30 in callImmediates node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:387:6 in __callImmediates node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:135:6 in __guard$argument_0 node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:364:10 in __guard node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:134:4 in flushedQueue

• [native code]:null in flushedQueue
• [native code]:null in invokeCallbackAndReturnFlushedQueue

if I use a console.log in onPress method of TouchableOpacity, it works fine.*

Answer 1

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

import {TouchableOpacity} from 'react-native;