如何从不同的JS渲染课程?错误:期待一个字符串

Question

当我运行此问题时，我会发现一个错误说： Element type is invalid: expected a string (built in components) or a class/function but got undefined, check the render method for LOGIN.

我只想从其他JS文件上显示主屏幕上的登录

这是LOGIN.JS＆lt; ----我在索引中称呼

'use strict';
import React, { Component, Image} from 'react';
import {View, Text, StyleSheet} from 'react-native';
var Login = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
            <Image style={styles.logo}
            source={require('image!lock')} />
            <Text>HI</Text>
            </View>
        );
    }
});

INDEX.IOS.JS＆lt; - 我在哪里打电话登录以在页面上显示

import React, { Component, Image } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
var Login = require('./Login');
export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container} >
       <Text style={styles.welcome}>
          Welcome!
        </Text>
        <Text style={styles.logins}>
        </Text> 
      <Login />
      </View>
    );        
  }
}

Answer 1

react渲染函数应将视图元素返回渲染。更改此

var Login = React.createClass({ render: function() { return ( HI ); } });

to

 var Login = React.createClass({ 
          render: function() {
            return (  
              <View style={{flex:1}}>
                  <Text>HI</Text>
              </View>
              ); 
          } 
   });

Answer 2

您可以将相同的语法用于登录。

也只有fyi似乎是您正在从react导入 Image，而不是两个文件中的反应本机。

import React, { Component} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
export default class Login extends Component {
    render() {
        return (
            <View style={styles.container}>
            <Image style={styles.logo}
            source={require('image!lock')} />
            <Text>HI</Text>
            </View>
        );
    }
}