使用卡片視圖從服務器獲取本機數據

Question

我想使用 card view react native 從服務器獲取數據，但是當我打開活動時它仍在加載，我的代碼中的錯誤在哪里？

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>

)}}

Answer 1

在您的情況下，問題是您沒有將ActivityIndicator animating屬性設置為false 。

但是同樣重要的是要注意，在 react-native 版本0.58.3之前仍然存在一個錯誤，請檢查這個

解決方案

使用這個可重用的組件，它有解決方法{ opacity: this.state.showActivityIndicator ? 1 : 0 } { 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"
  }
});

希望這可以幫助。！

使用卡片視圖從服務器獲取本機數據

問題描述

1 個解決方案

解決方案1
1 2019-02-23 13:36:52

使用卡片視圖從服務器獲取本機數據

問題描述

1 個解決方案

解決方案1 1 2019-02-23 13:36:52

解決方案1
1 2019-02-23 13:36:52