我想使用 card view react native 从服务器获取数据，但是当我打开 Activity 时它仍在加载，我的代码哪里出错了？
renderItem = ({ item }) => {
return (
<Card>
<CardItem cardBody>
<Image source={{ uri: 'http://bprwasa.com/assets/frontend/images/gallery/kpo.jpg' }} style={{ height: 200, width: null, flex: 1 }} />
</CardItem>
<CardItem>
<Body>
<Text>
{item.nama_wil}
</Text>
</Body>
</CardItem>
</Card>
)}
还有这个
render() {
return (
this.state.isLoading
?
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size='large' color='#330066' animating />
</View>
:
<Container>
<Content>
{this.state.dataSource}
{this.renderItem}
</Content>
</Container>
)}}
最佳答案
在您的情况下，问题是您没有将 ActivityIndicator 的 animating 属性设置为 false。
但是同样重要的是要注意在 react-native 版本 0.58.3 之前仍然存在一个错误，检查 this
解决方案
使用这个可重用组件，它有解决方法 { opacity: this.state.showActivityIndicator ? 1 : 0
确保将其属性 showActivityIndicator 设置为 true 和 false。
import React, { Component } from "react";
import { ActivityIndicator, StyleSheet } from "react-native";
export default class ActivityProgress extends Component {
constructor(props) {
super(props);
this.state = {
showActivityIndicator: props.showActivityIndicator
};
}
componentDidUpdate(prevProps) {
if (this.props.showActivityIndicator != prevProps.showActivityIndicator) {
this.setState({
showActivityIndicator: this.props.showActivityIndicator
});
}
}
render() {
return (
<ActivityIndicator
size={isAndroid() ? 100 : "large"}
color="red"
animating={true}
style={[
{ opacity: this.state.showActivityIndicator ? 1 : 0 },
styles.spinnerLoading
]}
/>
);
}
}
const styles = StyleSheet.create({
spinnerLoading: {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: "center",
justifyContent: "center"
}
});
希望这对您有所帮助!
关于javascript - 使用卡片 View react native 从服务器获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54842074/