Reactjs 从存储器缓慢加载/拉取图像-firebase-react native

我正在从firestore数据库中提取数据，每个数据库项上的一个字段是

image

，每个字段的值都是指向firebase存储的图像的URL

我想做的是直接从存储器中提取图像，作为从firestore提取的循环的一部分

我尝试这样做，因为当这个循环渲染项目时，图像需要几秒钟才能出现在屏幕上

请告知是否有解决此问题的替代方案

FirebaseData.js

onCollectionUpdate = (querySnapshot) => {
const data = [];
querySnapshot.forEach((doc) => {
  const { title, image, url, description } = doc.data();
    data.push({
      key: doc.id,
      doc, // DocumentSnapshot
      title,
      image,
      description,
      url
    });
});
this.setState({
  data,
  loading: false
});
}

render() {
    if (this.state.loading) {
      return <Spinner />; //RETURN A LOADING ICON
    }
return (
  <List containerStyle={styles.listStyle}>
    <FlatList
      data={this.state.data}
      renderItem={({ item }) => <ChildList {...item} />}
    />
  </List>
      );
    }
  }

export default class ChildListRow2 extends React.PureComponent {

render() {
  return (
      <ListItem
        title={
          <View>
          <Image source={{ uri: this.props.image }} style={styles.imageStyle} />
          <Text style={styles.titleTextStyle}>{this.props.title}</Text>
          </View>
        }
        subtitle={
          <View>
          <Text style={styles.subTitleTextStyle}>{this.props.description}</Text>
          </View>
        }
        hideChevron
        onPress={() => Linking.openURL(this.props.url)}
        containerStyle={styles.listItemStyle}
      />
    );
   }
}

onCollectionUpdate=（querySnapshot）=>{
常量数据=[]；
querySnapshot.forEach（（doc）=>{
const{title，image，url，description}=doc.data（）；
数据推送({
关键字：doc.id，
doc，//DocumentSnapshot
标题
形象,，
描述
网址
});
});
这是我的国家({
数据，
加载：错误
});
}
render（）{
if（this.state.loading）{
return；//返回加载图标
}
返回(
}
/>
);
}
}

ChildList.js

onCollectionUpdate = (querySnapshot) => {
const data = [];
querySnapshot.forEach((doc) => {
  const { title, image, url, description } = doc.data();
    data.push({
      key: doc.id,
      doc, // DocumentSnapshot
      title,
      image,
      description,
      url
    });
});
this.setState({
  data,
  loading: false
});
}

render() {
    if (this.state.loading) {
      return <Spinner />; //RETURN A LOADING ICON
    }
return (
  <List containerStyle={styles.listStyle}>
    <FlatList
      data={this.state.data}
      renderItem={({ item }) => <ChildList {...item} />}
    />
  </List>
      );
    }
  }

export default class ChildListRow2 extends React.PureComponent {

render() {
  return (
      <ListItem
        title={
          <View>
          <Image source={{ uri: this.props.image }} style={styles.imageStyle} />
          <Text style={styles.titleTextStyle}>{this.props.title}</Text>
          </View>
        }
        subtitle={
          <View>
          <Text style={styles.subTitleTextStyle}>{this.props.description}</Text>
          </View>
        }
        hideChevron
        onPress={() => Linking.openURL(this.props.url)}
        containerStyle={styles.listItemStyle}
      />
    );
   }
}

导出默认类ChildListRow2扩展React.PureComponent{
render（）{
返回(
Linking.openURL（this.props.url）}
containerStyle={styles.listItemStyle}
/>
);
}
}

您可以使用

图像组件的属性来显示和隐藏其余数据。可以显示加载微调器，直到加载文件，然后在加载完成时显示完整的组件

示例

export default class ChildListRow2 extends React.PureComponent {

  constructor() {
    super();
    this.state = {
      loaded: false
    };
  }

  imageLoaded = () => {
    this.setState({ loaded: true })
  }

  render() {
    return (
      <ListItem
        title={
          <View>
            <Image
              source={{ uri: this.props.image }}
              style={styles.imageStyle} 
              onLoadEnd={this.imageLoaded}
            />
            <Text style={styles.titleTextStyle}>{this.props.title}</Text>
          </View>
        }
        subtitle={
          <View>
            <Text style={styles.subTitleTextStyle}>{this.props.description}</Text>
          </View>
        }
        hideChevron={this.state.loaded}
        onPress={() => Linking.openURL(this.props.url)}
        containerStyle={styles.listItemStyle}
      />
    );
  }
}

导出默认类ChildListRow2扩展React.PureComponent{
构造函数（）{
超级（）；
此.state={
加载：false
};
}
imageLoaded=（）=>{
this.setState（{loaded:true}）
}
render（）{
返回(
Linking.openURL（this.props.url）}
containerStyle={styles.listItemStyle}
/>
);
}
}
那么您想在同一查询中获取firestorage图像？如果我在单独的列表组件文件中渲染图像，我如何使用该图像？在不知道您如何使用该数据的情况下，我无法提出任何相关建议。如果你用一些代码来编辑你的问题，显示你是如何呈现你的组件的，我会尝试建议一些我已经更新过的东西，以显示我是如何在另一个组件中使用数据的。正如您所见，在加载数据之前，我将返回一个微调器，但随后图像需要一段时间才能渲染，这迫使它看起来不专业。@garethiv添加了一个小示例来说明您可以使用哪种类型的东西。非常感谢您的帮助。