javascript - react native 预期字符串但得到对象

Question

我试图在我的index.android.js 中导入登录模块，但它似乎不起作用？ render 方法有什么问题？

login.js 位于/screens/login.js

react native 版本“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

'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()。更多信息here关于导出。