Question

我正在尝试在index.android.js中导入Login模块，但它似乎没有用？渲染方法有什么问题？

login.js位于/screens/login.js

react-native version＆＃34; 0.39.2＆＃34;

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);

/ screen目录下的

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()。有关export的更多信息here。

Answer 2

问题在于您的Button组件，请将其删除。其次，你也缺少风格。

Answer 3

改变这个：

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

这个

import Button from 'react-native-button';

React native Expected String但得到了对象

3 个答案: