ReactNative - Undefined不是对象（评估x）

Question

我正在阅读有关ReactNative的在线教程，其中包含＆＃34;包括＆＃34;一个文件进入项目;几乎像一个部分。

我收到此错误;

我的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，但我不确定它声称未定义的内容不是一个对象。

我的想法是将此模块包含在我的主项目中，并将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 /天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;