Javascript 使用卡视图从服务器获取数据时作出反应_Javascript_Android_Ios_Reactjs_React Native

Javascript 使用卡视图从服务器获取数据时作出反应

javascript android ios reactjs react-native

Javascript 使用卡视图从服务器获取数据时作出反应,javascript,android,ios,reactjs,react-native,Javascript,Android,Ios,Reactjs,React Native,我想使用card view react native从服务器获取数据，但当我打开activity时，它仍在加载，代码中的错误在哪里 renderItem = ({ item }) => { return ( <Card> <CardItem cardBody> <Image source={{ uri: 'http://bprwasa.com/assets/frontend/images/gallery/kpo.jpg' }} styl

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

renderItem=（{item}）=>{
返回(
{item.nama_wil}
)}

还有这个

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>

)}}

render（）{
返回(
此.state.isLoading
?
:
{this.state.dataSource}
{this.renderItem}
)}}

在您的情况下，问题是您没有将

活动指示器的属性设置为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"
  }
});


但是，同样重要的是要注意，在react native version0.58.3
之前，仍然存在一个bug，请检查
解决方案
使用此可重用组件，因为它具有解决方法{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"
  }
});


import React，{Component}来自“React”；
从“react native”导入{ActivityIndicator，StyleSheet}；
导出默认类ActivityProgress扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showActivityIndicator:props.showActivityIndicator
};
}
componentDidUpdate（prevProps）{
if（this.props.showActivityIndicator！=prevProps.showActivityIndicator）{
这是我的国家({
showActivityIndicator:this.props.showActivityIndicator
});
}
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
喷丝头加载：{
位置：“绝对”，
左:0,，
右:0,，
排名：0，
底部：0，
对齐项目：“中心”，
为内容辩护：“中心”
}
});

希望这有帮助
 您是否正在使用本机基址
？是，我正在使用本机基址