未处理的JS异常:无法为以下组件创建样式组件:[object Object]

时间:2019-06-20 19:10:11

标签: javascript reactjs react-native

我正在尝试消除导致我的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 />内注释掉了props,并确保错误消失了,但是应用程序仍然崩溃,这次仅是<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 Console中收到该错误。

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

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

我发现无论我切换到哪个分支,即使我几个星期都没有使用过的分支,该应用程序也会在Simulator内部自然崩溃。那不应该发生的。

因此,我决定更深入地研究MacOS控制台,特别是在~/Library/Logs处,应用程序本身崩溃时的日志应该在该日志中,并且我找到了这一行:

BUG in libdispatch client: mach_recv

1 个答案:

答案 0 :(得分:1)

在某个时候,我介绍了我只能进行升级时只能猜测的依赖性错误。我有一个保留的版本为0.53.3的可运行应用程序的快照。

我也遇到了那个问题,直到一位同事建议我将Detox版本从8.x.x升级到12.0.0,因为它在Xcode 10.1中表现不佳。

我这样做了,该应用不再崩溃。