使用卡视图从服务器中获取数据

我想使用卡片视图从服务器获取数据react本机，但是当我打开活动时仍在加载，我的代码中的错误在哪里？

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之前，仍然存在错误，请检查此

解决方案

使用此可重复使用的组件，它具有解决方法{ 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"
  }
});

希望这会有所帮助。！

相关内容

最新更新

热门标签：