如何修复在React Native中使用时的“Element type is invalid”错误< Swipeable>?

njthzxwz  于 2023-06-06  发布在  React
关注(0)|答案(1)|浏览(164)

元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:您可能忘记了从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
每次我使用这个命令时,我都会得到这个错误

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback,
  TouchableOpacity,
} from 'react-native';

import moment from 'moment';
import Swipeable from 'react-native-gesture-handler/';
import Icon from 'react-native-vector-icons/FontAwesome';

import 'moment/locale/pt-br';

import commonStyles from '../commonStyles';

export default (props) => {
  const doneOrNotStyle =
    props.doneAt != null ? { textDecorationLine: 'line-through' } : {};

  const date = props.doneAt ? props.doneAt : props.estimateAt;
  const formattedDate = moment(date).locale('pt-br').format('ddd, D [de] MMMM');

  const getRightContent = () => {
    return (
      <TouchableOpacity style={style.right}>
        <Icon name="trash" size={30} color="#fff" />
      </TouchableOpacity>
    );
  };

  return (
    <Swipeable>
      <View style={style.container}>
        <TouchableWithoutFeedback onPress={() => props.toggleTask(props.id)}>
          <View style={style.checkContainer}>{getCheckView(props.doneAt)}</View>
        </TouchableWithoutFeedback>
        <View>
          <Text style={[style.desc, doneOrNotStyle]}>{props.desc}</Text>
          <Text style={style.date}>{formattedDate}</Text>
        </View>
      </View>
    </Swipeable>
  );
};

function getCheckView(doneAt) {
  if (doneAt != null) {
    return (
      <View style={style.done}>
        <Icon name="check" size={20} color="#fff" />
      </View>
    );
  } else {
    return <View style={style.pending} />;
  }
}

const style = StyleSheet.create({
  container: {
    flexDirection: 'row',
    borderColor: '#AAA',
    borderBottomWidth: 1,
    alignItems: 'center',
    paddingVertical: 10,
  },
  checkContainer: {
    width: '20%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  pending: {
    height: 25,
    width: 25,
    borderRadius: 13,
    borderWidth: 1,
    borderColor: '#555',
  },
  done: {
    height: 25,
    width: 25,
    borderRadius: 13,
    borderWidth: 1,
    backgroundColor: '#4d7031',
    alignItems: 'center',
    justifyContent: 'center',
  },
  desc: {
    fontFamily: commonStyles.fontFamily,
    color: commonStyles.colors.mainText,
    fontSize: 15,
  },
  date: {
    fontFamily: commonStyles.fontFamily,
    color: commonStyles.colors.subText,
    fontSize: 12,
  },
  right: {
    backgroundColor: 'red',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingHorizontal: 20,
  },
});
ohfgkhjo

ohfgkhjo1#

修复导入,你忘了在斜杠后添加Swipeable

import Swipeable from 'react-native-gesture-handler/Swipeable';

相关问题