module - ReactNative - 未定义不是一个对象(评估 x)

Question

我正在阅读有关 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 在我的主文件中工作。

对此的任何帮助都会有所帮助。

现在谢谢

Answer 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;