Я пытаюсь импортировать модуль входа в мой 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);

login.js в каталоге /screen

'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;
0
Coder 13 Дек 2016 в 08:38

3 ответа

Лучший ответ

Предполагая, что react-native-button ссылается на этот, вы неправильно импортируете компонент , Так должно быть:

import Button from 'react-native-button';

Это связано с тем, что Button.js экспортирует компонент, используя export default class вместо module.export. Итак, вы должны использовать import вместо require(). Более подробную информацию здесь относительно export.

2
max23_ 13 Дек 2016 в 11:49

Изменить это:

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

За это

import Button from 'react-native-button';
0
Facundo La Rocca 13 Дек 2016 в 19:41

Проблема с компонентом Button, удалите его. Во-вторых, вам не хватает стилей тоже.

0
Pir Shukarullah Shah 13 Дек 2016 в 09:57