反应原生元素类型无效 - 导出



react-native非常新,卡在"元素类型无效错误"上

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
ActivityIndicatorIOS,
View
} from 'react-native';
export default class SplashWalls extends Component {
constructor(props) {
super(props);
this.state = {
wallsJSON: [],
isLoading: true
};
}
fetchWallsJSON() {
var url = 'https://unsplash.it/list';
fetch(url)
.then( response => response.json() )
.then( jsonData => {
console.log(jsonData);
this.setState({isLoading: false}); //update isLoading
})
.catch( error => console.log('Fetch error ' + error) );
}
componentDidMount() {
this.fetchWallsJSON();
}
render() {
var {isLoading} = this.state;
if(isLoading)
return this.renderLoadingMessage();
else
return this.renderResults();
}
renderLoadingMessage() {
return (
<View style={styles.loadingContainer}>
<ActivityIndicatorIOS
animating={true}
color={'#fff'}
size={'small'}
style={{margin: 15}} />
<Text style={{color: '#fff'}}>Contacting Unsplash</Text>
</View>
);
}
renderResults() {
return (
<View>
<Text>
Data loaded
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
loadingContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000'
}
});
AppRegistry.registerComponent('SplashWalls', () => SplashWalls);

错误状态:

元素类型无效:需要字符串(对于内置组件( 或类/函数(用于复合组件(,但得到:未定义。你 可能忘记从其定义的文件中导出组件。

检查"防溅墙"的渲染方法。

有什么想法吗?

这里的问题是你的

<ActivityIndicatorIOS />

此组件已弃用,必须替换为

<ActivityIndicator>

更多信息可以在这里找到:https://facebook.github.io/react-native/docs/activityindicator.html

要继续学习本教程,您必须进行以下更改:

import {
AppRegistry,
StyleSheet,
Text,
View,
ActivityIndicator,
} from 'react-native';

renderLoadingMessage () {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator
animating={true}
color={'#fff'}
size={'small'} 
style={{margin: 15}} />
<Text style={{color: '#fff'}}>Contacting Unsplash</Text>
</View>
)
}

最新更新