模块RCTEventEmitter不是注册的可调用模块（调用receiveTouches）

Question

当我在进行一些更改后尝试运行该应用程序时，出现此错误。我做错了什么？

模块RCTEventEmitter不是注册的可调用模块（调用receiveTouches）__callFunction C：\ Users \ Andrea Zani \ Documents \ WORK \ weatherApp \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：295：6 C：\ Users \ Andrea Zani \ Documents \ WORK \ weatherApp \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：108：26 __guard C：\ Users \ Andrea Zani \ Documents \ WORK \ weatherApp \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：269：6 callFunctionReturnFlushedQueue C：\ Users \ Andrea Zani \ Documents \ WORK \ weatherApp \ node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：107：17

这是代码

import React, { Component } from 'react-native'

import {
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableHighlight,
    Animated,
    ScrollView,
} from 'react-native'

import fetchWeather from './app/api/api'
import weatherIcon from './app/utils/icons'

class WeatherAppNative extends React.Component {

    getInitialState() {
        return {
            city: 'Bucuresti',
            country: 'Romania',
            weatherType: 'Clear',
            temperature: 21,
            searchedCity: 'Bucuresti',
            val: new Animated.Value(0),
            currentColor: 'rgba(255,255,255,0.5)',
            nextColor: this._randomColor(),
            icon: weatherIcon()
        }
    }

    getWeather() {
        fetchWeather(this.state.searchedCity).then((response) => {
            let weatherList = response.list[0]

            // Store nextColor, since we'd like to start next time with it.
            var current = this.state.nextColor

            // Reset animation
            this.state.val.setValue(0)

            this.setState({
                temperature: weatherList.main.temp,
                city: weatherList.name,
                country: weatherList.sys.country,
                weatherType: weatherList.weather[0].main,
                currentColor: current,
                nextColor: this._randomColor(),
                icon: weatherIcon(weatherList.weather[0].icon)
            })

        })
    }


    render() {
        var backgroundColor = this.state.val.interpolate({
            inputRange: [0, 1],
            outputRange: [
                this.state.currentColor,
                this.state.nextColor
            ],
        })


        // Start the animation
        Animated.spring(this.state.val, {
            tension: 1,
            friction: 20,
            toValue: 1
        }).start()


        return (
            <Animated.View style={{
                backgroundColor: backgroundColor,
                flex: 1,
                alignItems: 'stretch',
                justifyContent: 'center'}}>
                <View style={{marginBottom: this.state.keyboardSpace}}>
                    <View style={[styles.animatedContainer]}>
                        <Text style={styles.icon}>
                            {this.state.icon}
                        </Text>
                        <Text style={styles.temperature}>
                            {Math.round(this.state.temperature) + '°C'}
                        </Text>
                        <Text style={styles.location}>
                            {this.state.city}, {this.state.country}
                        </Text>
                        <Text style={styles.weatherType}>
                            {this.state.weatherType}
                        </Text>
                        <TextInput style={styles.input}
                            onChangeText={this.onChangeText}
                            onSubmitEditing={this.getWeather}
                            clearButtonMode={'always'}
                            clearTextOnFocus={true}
                            enablesReturnKeyAutomatically={true}
                            returnKeyType={'search'}/>
                    </View>
                </View>
            </Animated.View>
        )
    }


    onChangeText(searchedCity) {
        this.setState({
            searchedCity: searchedCity
        })
    }

    _randomColor() {
        var colors = [0, 1, 2].map(() => Math.ceil(Math.random() * 255))

        return 'rgba(' + colors.join(',') + ',0.6)'
    }
}


var styles = StyleSheet.create({
    animatedContainer: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    temperature: {
        fontSize: 62,
        fontWeight: '100',
        margin: 0
    },
    location: {
        fontSize: 14,
        fontWeight: '100',
        marginBottom: 20,
    },
    weatherType: {
        fontSize: 34,
        fontWeight: '500'
    },
    input: {
        borderWidth: 1,
        borderColor: '#666',
        height: 40,
        marginVertical: 20,
        marginHorizontal: 20,
        paddingHorizontal: 10,
        borderRadius: 5
    },
    icon: {
        fontFamily: 'WeatherIcons-Regular',
        fontSize: 130,
        padding: 0
    }
})

export default WeatherAppNative

Answer 1

您需要React像这样导入：import React from \'react\' .

\n\n

您的代码片段还有一些与范围相关的其他问题。

\n\n

这是一个工作片段：

\n\n

import React, { Component } from "react";\nimport { StyleSheet, Text, View, TextInput, Animated } from "react-native";\n\nimport fetchWeather from "./app/api/api";\nimport weatherIcon from "./app/utils/icons";\n\nfunction randomColor() {\n  const colors = [0, 1, 2].map(() => Math.ceil(Math.random() * 255));\n  return "rgba(" + colors.join(",") + ",0.6)";\n}\n\nexport default class WeatherAppNative extends Component {\n  state = {\n    city: "Bucuresti",\n    country: "Romania",\n    weatherType: "Clear",\n    temperature: 21,\n    searchedCity: "Bucuresti",\n    val: new Animated.Value(0),\n    currentColor: "rgba(255,255,255,0.5)",\n    nextColor: randomColor(),\n    icon: weatherIcon()\n  };\n\n  getWeather = async () => {\n    const { nextColor, searchedCity, val } = this.state;\n    const response = await fetchWeather(searchedCity);\n\n    let weatherList = response.list[0];\n\n    // Store nextColor, since we\'d like to start next time with it.\n    var current = nextColor;\n\n    // Reset animation\n    val.setValue(0);\n\n    this.setState({\n      temperature: weatherList.main.temp,\n      city: weatherList.name,\n      country: weatherList.sys.country,\n      weatherType: weatherList.weather[0].main,\n      currentColor: current,\n      nextColor: randomColor(),\n      icon: weatherIcon(weatherList.weather[0].icon)\n    });\n  };\n\n  render() {\n    const backgroundColor = this.state.val.interpolate({\n      inputRange: [0, 1],\n      outputRange: [this.state.currentColor, this.state.nextColor]\n    });\n\n    // Start the animation\n    Animated.spring(this.state.val, {\n      tension: 1,\n      friction: 20,\n      toValue: 1\n    }).start();\n\n    return (\n      <Animated.View\n        style={{\n          backgroundColor,\n          flex: 1,\n          alignItems: "stretch",\n          justifyContent: "center"\n        }}\n      >\n        <View style={{ marginBottom: this.state.keyboardSpace }}>\n          <View style={[styles.animatedContainer]}>\n            <Text style={styles.icon}>{this.state.icon}</Text>\n            <Text style={styles.temperature}>\n              {Math.round(this.state.temperature) + "\xc2\xb0C"}\n            </Text>\n            <Text style={styles.location}>\n              {this.state.city}, {this.state.country}\n            </Text>\n            <Text style={styles.weatherType}>{this.state.weatherType}</Text>\n            <TextInput\n              style={styles.input}\n              onChangeText={this.onChangeText}\n              onSubmitEditing={this.getWeather}\n              clearButtonMode={"always"}\n              clearTextOnFocus={true}\n              enablesReturnKeyAutomatically={true}\n              returnKeyType={"search"}\n            />\n          </View>\n        </View>\n      </Animated.View>\n    );\n  }\n\n  onChangeText = searchedCity =>\n    this.setState({\n      searchedCity: searchedCity\n    });\n}\n\nconst styles = StyleSheet.create({\n  animatedContainer: {\n    alignItems: "center",\n    justifyContent: "center"\n  },\n  temperature: {\n    fontSize: 62,\n    fontWeight: "100",\n    margin: 0\n  },\n  location: {\n    fontSize: 14,\n    fontWeight: "100",\n    marginBottom: 20\n  },\n  weatherType: {\n    fontSize: 34,\n    fontWeight: "500"\n  },\n  input: {\n    borderWidth: 1,\n    borderColor: "#666",\n    height: 40,\n    marginVertical: 20,\n    marginHorizontal: 20,\n    paddingHorizontal: 10,\n    borderRadius: 5\n  },\n  icon: {\n    fontFamily: "WeatherIcons-Regular",\n    fontSize: 130,\n    padding: 0\n  }\n});\n

\n