TouchableWithoutFeedback выдает ошибку рендеринга - PullRequest
Новая
       37

TouchableWithoutFeedback выдает ошибку рендеринга

1 голос
/ 08 июня 2019

Я разрабатываю приложение 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.

enter image description here

Что не так с моим кодом и как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 13 июня 2019

Трудно сказать, не имея возможности увидеть ваш импорт.Если вы уверены, что экспортируете свои компоненты, то это, вероятно, связано с именованным или стандартным экспортом, или вы забыли экспортировать один из ваших компонентов.Убедитесь, что вы используете экспорт по умолчанию ...

export default ExampleComponent

ваш импорт не содержит скобок и выглядит как

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

В противном случае, если вы используете именованные экспорты, например ...

export const ExampleComponent = () => {

ваш импорт включает скобки

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

Может помочь вам больше, если вы предоставите все необходимые компоненты, включая импорт

0 голосов
/ 08 июня 2019

Для начала, возможно, попробуйте открыть файл App.js и изменить эту строку класс YourApp расширяет компонент { в класс экспорта по умолчанию YourApp расширяет компонент <{}> {

...