未处理的JS异常：无法为以下组件创建样式组件：[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本身有关，原因是由于该应用程序只是在本地崩溃而导致我无法访问控制台。

因此，我继续进行操作，并注释掉其中的道具，<MaterialTabs />并确定错误消失了，但是应用程序仍然崩溃，这一次仅是<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.xx 升级到 12.0.0，因为它与 Xcode 10.1 配合得不好。

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