TouchableWithoutFeedback 拋出渲染錯誤

Question

我正在開發一個用於學習目的的 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.

我的代碼有什么問題，我該如何解決？

Answer 1

不確定你是否解決了這個問題，但我剛剛遇到了同樣的問題。

很容易解決一個相當愚蠢的錯誤。

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

本來應該

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

Answer 2

首先，也許嘗試打開 App.js 文件並修改這一行 class YourApp extends Component { into export default class YourApp extends Component<{}> {

Answer 3

無法看到您的導入，這很難說。 如果您確定要導出組件，那么它可能與命名與默認導出有關，或者忘記導出您的組件之一。 檢查以確保您使用的是默認導出...

export default ExampleComponent

您的導入不包含括號，看起來像

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

否則，如果您像這樣使用命名導出...

export const ExampleComponent = () => {

您的導入包括括號

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

如果您提供包括導入在內的所有相關組件，則可以為您提供更多幫助

TouchableWithoutFeedback 拋出渲染錯誤

問題描述

3 個解決方案

解決方案1
1 2019-10-10 13:29:24

解決方案2
0 2019-06-08 16:18:10

解決方案3
0 2019-06-12 23:47:26

TouchableWithoutFeedback 拋出渲染錯誤

問題描述

3 個解決方案

解決方案1 1 2019-10-10 13:29:24

解決方案2 0 2019-06-08 16:18:10

解決方案3 0 2019-06-12 23:47:26

解決方案1
1 2019-10-10 13:29:24

解決方案2
0 2019-06-08 16:18:10

解決方案3
0 2019-06-12 23:47:26