反应本机“导出预设”在世博弹出后不起作用

Question

我用博览创建了一个应用程序，一切都很好。

由于我现在需要本机功能，所以我创建了一个空白的新应用程序，使用react本机init，并试图将我的世博项目迁移到这个新的空白项目，以使用android和ios文件夹(exp对我不起作用)。

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

在世博项目中，我创建了如下组件：

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本身造成的。相反，是MaterialCommunityIcons在 ButtonFontIcon中造成了问题。

总之，上面的错误消息有时不会显示准确的错误位置，相反，指示方法中的所有导入方法也应该进行验证。

在这种情况下，

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

应改为：

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

(退出世博会前的原线是：

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

)