反應本地預期的字符串，但得到了對象

Question

我想在我的index.android.js中導入登錄模塊，但它似乎並沒有工作？渲染方法有什麼問題？

login.js位於/screens/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); 

登錄。 js under/screens directory

'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是出口用的export default class代替module.export的組件。所以，你應該使用import而不是require()。有關export的更多信息here。

Answer 2

問題在於你的Button組件，刪除它。其次，你也失去了風格。

Answer 3

更改此：

var Button = require('react-native-button'); 

此

import Button from 'react-native-button';