开发者问题收集

ReactNative - Undefined 不是一个对象(评估 x)

2016-05-24
3154

我正在阅读并遵循有关 ReactNative 的在线教程,其中将文件“包含”到项目中;几乎像部分一样。

我收到此错误;

错误图片

我的 index.ios.js

// Imports
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

//var DayItem = require('./src/day-item');
import {
  DayItem
} from './src/day-item';


// Component
class Weekdays extends Component {
  render() {
    return (
      <View>
        <Text style={styles.textStyles}>
          Days of the Week
        </Text>
        <DayItem />
      </View>
    );
  }
}

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

day-item 文件是:

// Imports
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text
} from 'react'

// Component
class DayItem extends Component { 
    render() {
        return (
            <Text>
            Hello world
            </Text>
        );
    } 
}

var { NativeModules } = require('react-native');
module.exports = NativeModules.DayItem;

我之前没有做过 React Native,但是当它声称 undefined 不是对象时,我不确定它指的是什么。

我的想法是将此模块包含到我的主要项目中,并在一行中呈现 DayItem 模块。

我注意到有时我会收到错误

<DayItem />

如果我将它放在 <View> 之外,但在里面则没问题。

无论如何,我不确定如何让我的 Hello World Partial 在我的主文件中工作。

任何帮助都会有所帮助。

现在谢谢了

1个回答

正如 Cherniv 和 Nader 指出的那样,代码中有几个错误。

另一个错误出现在 day-item js 文件中

import {
  AppRegistry,
  StyleSheet,
  Text
} from 'react';

应该是

import {
  AppRegistry,
  StyleSheet,
  Text
} from 'react-native';

这是完整的工作代码。

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import DayItem from './src/day-item';


// Component
class Weekdays extends Component {
  render() {
    return (
      <View>
        <Text>
          Days of the Week
        </Text>
        <DayItem />
      </View>
    );
  }
}

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

src/day-item.js

// Imports
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text
} from 'react-native';

// Component
class DayItem extends Component {
    render() {
        return (
            <Text>
            Hello world
            </Text>
        );
    }
}

export default DayItem;
Jickson
2016-05-24