javascript - 未处理的 JS 异常 : Cannot create styled-component for component: [object Object]

Question

我正在尝试消除导致我的 React Native 0.53.3 应用程序在打开启动画面后崩溃的错误。

Environment:
  OS: macOS High Sierra 10.13.6
  Node: 11.10.1
  Yarn: 1.10.1
  npm: 6.7.0
  Watchman: 4.7.0
  Xcode: Xcode 10.1 Build version 10B61
  Android Studio: 3.4 AI-183.5429.30.34.5452501

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.53.3 => 0.53.3

来自 MacOS console我能够获得此错误消息:

Unhandled JS Exception: Cannot create styled-component for component: [object Object]

此应用程序中唯一的地方 styled-component正在被利用在这里package-lock.json :

"styled-components": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-2.4.1.tgz",
      "integrity": "sha1-ZjvQSF1LarRvlGIQ3APSOY0a3nQ=",
      "requires": {
        "buffer": "^5.0.3",
        "css-to-react-native": "^2.0.3",
        "fbjs": "^0.8.9",
        "hoist-non-react-statics": "^1.2.0",
        "is-plain-object": "^2.0.1",
        "prop-types": "^15.5.4",
        "stylis": "^3.4.0",
        "supports-color": "^3.2.3"
      },

这里:

"react-native-material-tabs": {
      "version": "3.5.0",
      "resolved": "https://registry.npmjs.org/react-native-material-tabs/-/react-native-material-tabs-3.5.0.tgz",
      "integrity": "sha512-OSni2m2rcxiIYd082fjjroRrU8o/8pZlP3Ok/m244Gl9vUmhyj5WVeTgSYODjmHksQ9IIF2/sZurZcy3DawF7A==",
      "requires": {
        "prop-types": "^15.5.10",
        "styled-components": "^2.3.0"
      }
    },

似乎它可能是react-native-material-tabs 的依赖项| ？这是唯一实际使用的库，特别是 MaterialTabs :

import MaterialTabs from 'react-native-material-tabs';

并在这里实现:

render() {
    return (
      <View style={styles.container}>
        {Platform.OS === 'android' && (
          <MaterialTabs
            uppercase={false}
            items={this.props.tabNames}
            selectedIndex={this.state.selectedIndex}
            onChange={this._selectTab}
            barColor={v2Colors.charcoalDark}
            indicatorColor={v2Colors.green}
            activeTextColor={v2Colors.white}
            inactiveTextColor={v2Colors.gray}
            textStyle={{
              fontSize: moderateScale(14, 0.2),
              ...v2Fonts.GothamRegular,
            }}
          />
        )}
        {Platform.OS === 'ios' && (
          <View style={styles.iOSTabsWrapper}>
            {this.props.tabNames.map((tabName, index) => {
              const tabWrapperStyles = [styles.tabWrapper];
              const tabTextStyles = [styles.tabText];
              if (index === 0) {
                tabWrapperStyles.push(styles.tabWrapperFirst);
              } else if (index === this.props.tabNames.length - 1) {
                tabWrapperStyles.push(styles.tabWrapperLast);
              }

应用程序崩溃，因此据我所知我无法进行控制台日志记录。老实说，我不确定我是否走在正确的轨道上。以前有人遇到过这个问题吗？或者，如果问题确实出在 MaterialTabs 中的 Prop 上，您能否建议一种调试方法？由于应用程序 native 崩溃，我无法访问控制台。

所以我继续在 <MaterialTabs /> 中注释掉 Prop 果然错误消失了，但应用程序仍然崩溃，这次只有 <FBApplicationProcess: 0x7ff4da65ddd0; appName (com.nfib.appName); pid: 11010> crashed.

我得到的另一个错误是 Module AppRegistry is not a registered callable module (calling runApplication)

但这是指 index.ios.js 中的代码除非我弄错了，否则它没有任何问题:

import {AppRegistry} from 'react-native';
import KeyboardManager from 'react-native-keyboard-manager';
import AppName from './App';

KeyboardManager.setToolbarPreviousNextButtonEnable(true);

AppRegistry.registerComponent('AppName', () => AppName);

同样的错误，即使我删除了所有与 styled-components 有关的内容包括 react-native-material-tabs当我尝试打开持续崩溃的应用程序时，我仍然在 MacOS 控制台中收到该错误。

最近，我采取了一种分而治之的方法，系统地注释掉整个组件和屏幕，但到目前为止，我仍然在 MacOS 控制台中遇到同样的错误。

问题可能出在我的 main.jsbundle 上吗？ ？

我发现，无论我切换到哪个分支，即使是我几周未处理过的分支，应用程序也会在 Simulator 内部崩溃。这不应该发生。

所以我决定深入了解 MacOS 控制台，特别是在 ~/Library/Logs应用程序本身崩溃时的日志应该在哪里，我发现了这一行:

BUG in libdispatch client: mach_recv

Answer 1

在某些时候，我在尝试升级时引入了我只能猜测是依赖性错误的猜测。我有一个版本为 0.53.3 的工作应用程序的快照，我已将其放在一边。

在一位同事建议我将 Detox 版本从 8.x.x 升级到 12.0.0 之前，我也遇到了问题，因为它不能很好地与 Xcode 10.1 配合使用。

我这样做了，应用程序不再崩溃。