ネイティブの予想される文字列に反応しますが、オブジェクトがあります

Question

index.android.jsにログインモジュールをインポートしようとしていますが、うまくいきません。レンダリングメソッドで何が問題になっていますか？

login.jsは

反応し、ネイティブバージョン "0.39.2"

index.android.js

'use strict'; 
import React, { Component } from 'react'; 
import { AppRegistry} from 'react-native'; 

//login module 
var LoginScreen = require('./screens/login'); 

var app = React.createClass({ 
    render: function() { 
    return (
     <LoginScreen /> 
    ); 
    } 
}); 
AppRegistry.registerComponent('app',() => app); 

ログインを/screens/login.jsに位置しています。 js/screensディレクトリの下に

'use strict'; 
import React, { Component } from 'react'; 
var Button = require('react-native-button'); 

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


var Login = React.createClass({ 
    getInitialState: function() { 
     return { 
      username: '', 
      password: '' 
     } 
    }, 
    _loginClick: function(event){ 
     console.log('login tapped'); 
    }, 
    render: function() { 
     return (
      <View style={styles.container}> 
       <View style={styles.inputs}> 
        <View style={styles.inputContainer}> 
         <TextInput 
          style={[styles.input, styles.whiteFont]} 
          placeholder="Username" 
          placeholderTextColor="#FFF" 
          value={this.state.username} 
         /> 
        </View> 
        <View style={styles.inputContainer}> 
         <TextInput 
          password={true} 
          style={[styles.input, styles.whiteFont]} 
          placeholder="Pasword" 
          placeholderTextColor="#FFF" 
          value={this.state.password} 
         /> 
        </View> 
        <View style={styles.forgotContainer}> 
         <Text style={styles.greyFont}>Forgot Password</Text> 
        </View> 
       </View> 
       <View style={styles.signin}> 
        <Text style={styles.whiteFont}>Sign In</Text> 
        <Button 
         style={{borderWidth: 1, borderColor: 'blue'}} 
         onPress={this._loginClick}> 
         Login 
        </Button> 
       </View> 
       <View style={styles.signup}> 
        <Text style={styles.greyFont}>Don't have an account?<Text style={styles.whiteFont}> Sign Up</Text></Text> 
       </View> 
      </View> 
     ); 
    }, 

}); 

module.exports = Login; 

Answer 1

react-native-buttonがthisを指していると仮定すると、コンポーネントを誤ってインポートしています。それは次のようになります。

import Button from 'react-native-button'; 

Button.jsではなくmodule.exportのexport default classを使用してコンポーネントをエクスポートしているためです。したがって、require()の代わりにimportを使用する必要があります。詳細情報hereについてはexportです。

Answer 2

Buttonコンポーネントで問題が発生しています。削除してください。第二にあなたもスタイルが欠けています。

Answer 3

変更この：この

import Button from 'react-native-button';