Question

我用expo创建了一个应用程序，一切正常。

由于我现在需要本机功能，我使用react-native init创建了一个空白的新应用程序，我正在尝试将我的expo项目迁移到这个新的空白项目以使用android和ios文件夹（exp detach不起作用对我来说。）

然而，在迁移所有文件后，我在导出组件时遇到了一些奇怪的错误。

在expo项目中，我创建了这样的组件：

export default class MyComponent extends React.Component {
  render() {
    return(
      //something
    ) 
  }
}

然后我用

import MyComponent from './~MyComponent'

导入它。

然而，在迁移之后，我必须重写像这样的每个组件才能使它工作：

class myComponent extends React.Component {
  render() {
    return(
      //something
    )
  }
}

MyComponent = new myComponent
export default MyComponent

如果我不这样做，我会收到错误

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

这是我的设置：

的package.json

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "format": "prettier-eslint \"src/**/*.js\""
  },
  "dependencies": {
    "mobx": "^3.2.2",
    "mobx-react": "^4.2.2",
    "moment": "^2.18.1",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.46.4",
    "react-native-vector-icons": "^4.2.0",
    "react-navigation": "^1.0.0-beta.11"
  },
  "devDependencies": {
    "babel-preset-react-native-stage-0": "^1.0.1",
    "prettier": "^1.5.3",
    "prettier-eslint": "^6.4.2",
    "babel-eslint": "^7.2.3",
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "2.1.0",
    "eslint": "4.3.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.1.0",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
  "presets": [
    "react-native",
    "react-native-stage-0/decorator-support"
  ]
}

我想这与我的babel设置有关，但我无法理解。非常感谢帮助，因为我有> 100个组件并且重写所有这些组件将非常繁琐......

由于

Answer 1

我刚刚从世博会退出了我的项目，现在我面临的问题与上述问题完全相同。因此，我将我的经验留在这里，希望对将来的其他人有所帮助。

上面提到的卸载和重新安装方法@phillipwinder在我的情况下不起作用。

经过进一步的搜索和挖掘，我找到了解决的办法。有关详情，请参见下文：

错误消息：

不变违反：不变违反：元素类型无效：   预期的字符串（用于内置组件）或类/函数（用于   复合组件），但得到：未定义。您可能忘记了出口   您的组件来自定义它的文件，或者您可能已经混合了   设置默认名称并命名导入。

检查ButtonFontIcon的呈现方法。

搜索到错误消息后，我们知道这意味着未找到导入目标组件/方法，通常是由于滥用导入/导入对引起的：

export default MyComponent
import MyComponent from 'xxx'

或

export MyComponent
import {MyComponent} from 'xxx'

因此，凭直觉，我们将验证错误消息中提到的ButtonFontIcon方法。在这种情况下，它是一个自定义组件（下面的代码是其中的一部分）。但是，在反复验证和测试其他可能的解决方案之后，问题仍然存在。

import { MaterialCommunityIcons } from 'react-native-vector-icons';

export default function ButtonFontIcon({
    iconName, buttonStyle, size, onPress
}) {
    return (
        <TouchableHighlight
            onPress={onPress}
            underlayColor={buttonStyle === LIGHT_CONTENT ? colors.blackUnderlayOnBlack : colors.greyUnderlayOnWhite}
        >
            <View style={styles.container}>
                <MaterialCommunityIcons name={iconName} size={size} style={{ color: (buttonStyle === LIGHT_CONTENT ? colors.whiteFontOnBlack : colors.blackDarkFontOnWhite) }} />
            </View>
        </TouchableHighlight >
    );
}

实际上，此问题不是由ButtonFontIcon本身引起的。相反，是在内部{strong> MaterialCommunityIcons引起问题的ButtonFontIcon。

总而言之，上面的错误消息有时不会显示确切的错误位置，相反，还应验证指示方法内的所有导入方法。

在这种情况下

import { MaterialCommunityIcons } from 'react-native-vector-icons';

应替换为：

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

（从Expo弹出之前的原始行是：

import { MaterialCommunityIcons } from '@expo/vector-icons';

）

在expo弹出

1 个答案: