Javascript 反应本机不变冲突

因此，我构建了一个微调器组件，并不断得到不变的冲突

组成部分：

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

从“React”导入React；
从“react native”导入{View，ActivityIndicator}；
常量微调器=（{size}）=>{
报税表（
);
};
常量样式={
喷丝头样式：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
}
};
导出{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;

//导入libs
从“React”导入React，{Component}；
从“react native”导入{ScrollView}；
从“Axios”导入Axios；
从“/AlbumDetail”导入AlbumDetail；
从“./common”导入{Spinner}；
//创建组件
类列表扩展组件{
状态={
相册：[]，
加载：正确
}
组件willmount（）{
get（'xxxxx.json'）。然后（响应=>
这是我的国家({
相册：response.data，
加载：错误
})
);
}
renderAlbums（）{
if（this.state.loading）{
返回
}
返回此.state.albums.map（album=>
)
}
render（）{
返回(
{this.renderAlbums（）}
);
}
}
//导出组件以供其余组件使用
导出默认列表；

完整错误为：不变冲突：元素类型无效：应为字符串

我试着加上：

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

if（this.state.loading）{
返回(
)
}

---

这就行了。但当作为一个组件使用时，它不想玩。任何帮助都会很好。谢谢，公用文件夹中的索引没有：

---

export*from./spinner'
您还可以将出口声明更改为：
导出默认微调器

及进口报关至：
从“./common/Spinner”导入微调器

但就我个人而言，我在公用文件夹中使用index.js存储所有导出，在本例中：
导出*自./Spinner

然后我必须通过调用导入它：
从“./common”导入{Spinner}
 在
spinner
组件中，是否尝试使用
react native
中的
StyleSheet
创建样式属性？例如：
const styles=StyleSheet.create（{container:{…}}）
i仍在学习，但还没有做到这一点，我试图删除整个样式块，但仍然出现错误。可能是
renderAlbums
无法访问
此
，因为您没有绑定它。考虑将其编写为箭头函数
renderAlbums=（）=>{…}
。还应该考虑使用<代码>平面列表< />代码>而不是<代码> ScLabVIEW 。code>ScrollView

不适合大列表。和

album.title

作为键听起来不够好。在最后一个代码块中，我使用了RenderBums中的ActivityIndicator，它可以工作，所以我不确定它是否可以工作。您可以发布

/common

文件或文件夹的代码吗？