React Native:创建组件错误

Posted

技术标签:

【中文标题】React Native:创建组件错误【英文标题】:React Native: Create component error 【发布时间】:2016-02-20 19:55:00 【问题描述】:

我正在尝试创建一个反应原生组件,基本上只是通过一个组件重新渲染默认屏幕。但我收到一个错误:

Cant find variable: Component

登录.js:

    'use strict';
    var React = require('react-native');
    var 
      AppRegistry,
      Component,
      StyleSheet,
      Text,
      View
     = React;

    var SearchScreen = React.createClass(

      getInitialState: function() 
        return 
        ;
      ,
      render: function() 
        return (
          <View style=styles.container>
            <Text style=styles.welcome>
              Welcome to React Native!
            </Text>
            <Text style=styles.instructions>
              To get started, edit index.android.js
            </Text>
            <Text style=styles.instructions>
              Shake or press menu button for dev menu
            </Text>
          </View>
        );
    
    );


    const styles = StyleSheet.create(
      container: 
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      ,
      welcome: 
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      ,
      instructions: 
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      ,
    );

module.exports = Login;

index.android.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
var React = require('react-native');
var 
  AppRegistry
 = React;

var Login = require('./Login');

class theUI extends Component 
  render() 
    return (
      <Login />
    );
  


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

找不到的组件是&lt;Login /&gt;

我查看了官方 repo 中的电影示例以及其他几个示例,但我看不出我做错了什么/有什么不同。

我在 Windows 10 上,index.android.js 和 login.js 都在根目录中(不在子目录中)。

【问题讨论】:

【参考方案1】:

您忘记包含 React 中的 Component 类。

var 
  AppRegistry,
  Component,
 = React;

class fortysevenui extends React.Component 

【讨论】:

以上是关于React Native:创建组件错误的主要内容,如果未能解决你的问题,请参考以下文章

使用带有样式组件的动画(react-native)

React Native:播放视频错误组件异常

React-Native:如何创建多个 Native UI 组件的实例?

React-native 没有将组件识别为组件

React Native基础与入门--初识React Native

如何创建动态的 React Native 组件