gpt4 book ai didi

javascript - 使用卡片 View react native 从服务器获取数据

转载 作者:行者123 更新时间:2023-11-29 11:29:43 24 4
gpt4 key购买 nike

我想使用 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>

)}}

最佳答案

在您的情况下,问题是您没有将 ActivityIndi​​catoranimating 属性设置为 false

但是同样重要的是要注意在 react-native 版本 0.58.3 之前仍然存在一个错误,检查 this

解决方案

使用这个可重用组件,它有解决方法 { opacity: this.state.showActivityIndi​​cator ? 1 : 0 确保将其属性 showActivityIndi​​cator 设置为 truefalse

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com