React Native - Инвариантное Нарушение

Question

Итак, я создал компонент Spinner и продолжаю получать инвариантное нарушение.

Составная часть:

import React from 'react';
import { View, ActivityIndicator } from 'react-native';

const Spinner = ({ size }) => {
    return ( 
        <View style={ styles.spinnerStyle }>
            <ActivityIndicator size={ size || 'large' } />
        </View>
    );
};

const styles = {
    spinnerStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
};

export { Spinner };

И я использую это здесь:

// Import libs
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import Axios from 'axios';
import AlbumDetail from './albumDetail';
import { Spinner } from './common';

// Create component
class AlbumList extends Component {
    state = {
        albums: [],
        loading: true
    }

    componentWillMount() {
        Axios.get('xxxxx.json').then(response =>
            this.setState({
                albums: response.data,
                loading: false
            })
        );
    }

    renderAlbums() {
        if ( this.state.loading ) {
            return <Spinner size='small'></Spinner>
        }

        return this.state.albums.map( album => 
            <AlbumDetail key={album.title} album={album}/>
        )
    }

    render() {
        return (
            <ScrollView>
                {this.renderAlbums()}
            </ScrollView>
        );
    }
}

// Export the component for the rest to use
export default AlbumList;

Полная ошибка: Нарушение инварианта: Недопустимый тип элемента: ожидается строка.

Я попытался просто добавить:

if ( this.state.loading ) {
   return (
       <View style={styles.loading}>
          <ActivityIndicator size='large' />
        </View>
    )
 }

И это работает. Но при использовании в качестве компонента он не хочет играть. Любая помощь будет отличной. Спасибо

Answer 1

Индекс в общей папке не имел:

export * from './spinner';

Answer 2

Вы также можете изменить декларацию экспорта на: экспорт Spinner по умолчанию;

и импортировать декларацию: import Spinner из./common/Spinner ';

но лично я использую index.js в моей общей папке для хранения всего экспорта, в этом случае: export * from ./Spinner;

а затем мне нужно импортировать его, вызвав: import { Spinner } из './common';