Question

我正在尝试渲染每个都有1张图片的项目，在渲染2张或更多图片之后，该应用程序会慢下来进行爬网。当图像src是关闭的一些图像时，谷歌注意到似乎减慢了速度，但是当我从服务器提供图像时（给出URL而不是图像本身）该应用程序只会变慢。

这是主页

 _keyExtractor = (item, index) => index.toString();
  renderItem = ({ item , index }) => <Item key={index} ItemData = {item}/>;
  render() {
   

    return (
      <Wallpaper>
        <Menu navigation = {this.props.navigation}/>
       <View style={{direction: 'rtl'}}>
      <FlatList
        style={{marginTop: 30}}
          data={this.Items}
          keyExtractor={this._keyExtractor}
          getItemLayout={(data, index) => (
            {length: 150, offset: 150 * index, index}
          )}
          renderItem={this.renderItem}
          initialNumToRender={5}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.getUpdate}
            />
          }
  
        />
      </View>
      <Button title="LOG OUT" onPress={()=>{AsyncStorage.removeItem("@yad4:user"), ()=> {this.props.navigation.navigation("Login")}}}/>
      </Wallpaper>
    );
  }

项目组件

  render() {
        const image = this.props.ItemData.ItemImg;
        console.log(encodeURI(image));
        
       return (

            <View  style={{marginTop: 20 , direction: "rtl"}}>
            <TouchableOpacity onPress={ this.navigate}>
                    <View style={styles.container}>
                        
                        <Image
                            style={{ width: 150, height: 150, borderRadius: 10  }}
                            source={{ uri:  encodeURI(image) }} />
                        <Text style= {styles.location}>מיקום: {this.props.ItemData.ItemLocation}</Text>
                        <Text style={styles.title}>{this.props.ItemData.CatagoryName }, {this.props.ItemData.ItemName}</Text>
                        <View style= {styles.description}> 
                            <Text numberOfLines= {6} ellipsizeMode='tail'>
                                {this.props.ItemData.ItemDscription}
                            </Text>
                        </View>
                        <Text style={styles.price}>{this.props.ItemData.price} &#8362;</Text>
                    </View>
                </TouchableOpacity>
            </View>

        );
    }

这是将图像保存在服务器上的方式，我检查了base64服务器正在通过在线base64进行图像获取并显示了图像

    string ImgName = $"ImageStorage/{email}_{catagory}_{name}_{price}_image.jpg";
    String path = HttpContext.Current.Server.MapPath($"~/"); //Path

    //Check if directory exist
    if (!System.IO.Directory.Exists(path))
    {
        System.IO.Directory.CreateDirectory(path); //Create directory if it doesn't exist
    }


    //set the image path
    string imgPath = Path.Combine(path, ImgName);
    byte[] imageBytes = Convert.FromBase64String(image64);


    using (Image image = Image.FromStream(new MemoryStream(imageBytes)))
    {
        image.Save(imgPath, ImageFormat.Jpeg);  // Or Png
    }

    string returnPath = $"SERVER ADDRESS"+ ImgName;

反应本机。从服务器渲染图像会使应用变慢

0 个答案: