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

慢速图像加载/从存储中提取图像 - firebase - 对原生

1 个答案: