缓慢的图像加载/从存储中提取图像 - firebase - 反应原生

Question

我正在从我的 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>
      );
    }
  }

ChildList.js

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}
      />
    );
   }
}

Answer 1

您可以使用Image 组件的onLoadEnd 和onLoadStart 属性来显示和隐藏其余数据。您可以在文件加载之前显示加载微调器，然后在完成时显示完整的组件。

示例

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}
      />
    );
  }
}