TouchableWithoutFeedback 抛出渲染错误答案

【问题标题】：TouchableWithoutFeedback is throwing rendering errorTouchableWithoutFeedback 抛出渲染错误
【发布时间】：2019-06-08 16:11:26
【问题描述】：

我正在开发一个用于学习目的的 React Native 应用程序。现在我正在使用 TouchableWithoutFeedback 组件来响应用户交互。但是我遇到了一个错误。

这是我的代码：

class Events extends React.Component {
  static navigationOptions = {
    title: "Events"
  };

  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          id: 1,
          name: "Name 1",
          image_url: "https://www.vkguy.co.uk/images/slideshow/05.jpg"
        },
        {
          id: 2,
          name: "Name 2",
          image_url: "https://www.vkguy.co.uk/images/slideshow/05.jpg"
        },
        {
          id: 3,
          name: "Name 3",
          image_url: "https://www.vkguy.co.uk/images/slideshow/05.jpg"
        }
      ]
    };
  }

  _handleLoadMore() {}

  renderItem(item) {
    return (
      <TouchableWithoutFeedback onPress={() => {
        
      }}>
        <View>
        <Card>
          <CardItem cardBody>
            <Image
              source={{ uri: item.image_url }}
              style={{ height: 200, width: null, flex: 1 }}
            />
          </CardItem>
          <CardItem>
            <Left>
              <Button transparent>
                <Icon active name="thumbs-up" />
                <Text>12 Likes</Text>
              </Button>
            </Left>
            <Body>
              <Button transparent>
                <Icon active name="chatbubbles" />
                <Text>4 Comments</Text>
              </Button>
            </Body>
            <Right>
              <Text>11h ago</Text>
            </Right>
          </CardItem>
        </Card>
        </View>
      </TouchableWithoutFeedback>
    );
  }

  render() {
    return (
      <View style={{ flex: 1, width: "100%" }}>
        <FlatList
          data={this.state.data}
          keyExtractor={item => item.id.toString()}
          renderItem={({ item }) => this.renderItem(item)}
          onEndReached={this._handleLoadMore}
        />
      </View>
    );
  }
}

export default Events;

当我点击视图时，我得到了这个错误。

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

我的代码有什么问题，我该如何解决？

【问题讨论】：

github.com/facebook/react-native/issues/16332
你的renderItem函数绑定了吗？在提供的代码中看不到这一点。尝试通过在构造函数中添加 this.renderItem=this.renderItem.bind(this) 来绑定函数。或者简单地将函数转换为粗箭头函数()=>{}。
嗨，Nishant，我在构造函数中添加了绑定。但还是不行。

标签： react-native touchablewithoutfeedback

【解决方案1】：

不确定你是否解决了这个问题，但我也遇到了同样的问题。

对于一个相当愚蠢的错误很容易解决。

import React, { Component, TouchableWithoutFeedback } from "react";
import { View } from "react-native";

应该是

import React, { Component } from "react";
import { View, TouchableWithoutFeedback } from "react-native";

【讨论】：

【解决方案2】：

首先，也许尝试打开 App.js 文件并修改这一行类 YourApp 扩展组件 { 进入导出默认类 YourApp 扩展组件 {

【讨论】：

另外，你可能不小心从 native-base 导入了图片，而不是从 react-native 导入（这是一个常见的错误）
不，这不是问题。如果我删除了 TouchableWithoutFeedback 组件，一切都会按预期工作。
也许你应该用一些东西来填充''onPress''函数？比如just和alert？

【解决方案3】：

如果不能看到您的导入，这很难说。如果您确定要导出组件，那么它可能与命名导出与默认导出有关，或者忘记导出您的组件之一。检查以确保您使用的是默认导出...

export default ExampleComponent

您的导入不包括括号，看起来像

import ExampleComponent from '../../folder/file'

否则，如果您使用这样的命名导出...

export const ExampleComponent = () => {

您的导入包含括号

import { ExampleComponent } from '../../folder/file'

如果您提供包括导入在内的所有相关组件，可以为您提供更多帮助

【讨论】：