Question

我正在构建一个具有一些额外功能的简单图像列表应用程序，其中之一是下载图像功能。

但是，我不断收到此“找不到变量项”错误。我该如何解决？

item.image

// ...

downloadImage = () => {
  const fileUri = `${FileSystem.documentDirectory}breathtaking.jpg`

  FileSystem
    .downloadAsync(item.image, fileUri)
    .then(({ uri }) => {
      console.log('Finished downloading to ', uri)
    })

  CameraRoll.saveToCameraRoll(fileUri, 'photo')
}

// ...

return (
// ...
 <Button
   icon='file-download'
   mode='contained'
   onPress={this.downloadImage}
   style={{ borderRadius: 0, width: '33.4%' }}
 />
// ...
);

UPDATE

componentDidMount() {
    const url = "/* json */";
    this.setState({ isLoading: true });
    fetch(url)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          dataSource: shuffle(responseJson.listings),
          dataBackup: responseJson.listings,
          isLoading: false
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

renderItem = ({ item }) => {
    return (
      <View style={{ padding: 15, paddingBottom: 0 }}>
        <Card elevation={1}>
          <View
            style={{
              flex: 1,
              flexDirection: "row",
              flexWrap: "wrap",
              alignItems: "flex-start"
            }}
          >                  

            <View style={{ flex: 1 }}>
              <TouchableOpacity
                    onPress={() => {
                      this.toggleModal();
                      this.setState({
                        webViewurl: item.image
                      });
                    }}
                    onLongPress={() => Linking.openURL(item.image)}
                    activeColor="blue"
                  >
              <ImageBackground
                source={{ uri: item.image }}
                style={{ height: 216 }}
              >
                <IconButton
                  icon="favorite-border"
                  size={20}
                  color="#6200EE"
                  style={{ alignSelf: "flex-end" }}
                  onPress={this._savedAlert}
                />
              </ImageBackground>
              </TouchableOpacity>
            </View>
          </View>
        </Card>
      </View>
    );
}

Answer 1

您尚未声明变量item

// ...

downloadImage = () => {
  const item = {}
  const fileUri = `${FileSystem.documentDirectory}breathtaking.jpg`

  FileSystem
    .downloadAsync(item.image, fileUri)
    .then(({ uri }) => {
      console.log('Finished downloading to ', uri);
    })

  CameraRoll.saveToCameraRoll(fileUri, 'photo');
}

// ...

您可以这样做

Answer 2

尝试使用“ this”关键字：

FileSystem.downloadAsync(
      this.item.image,
      fileUri
)

Answer 3

未声明item变量。所以你不能使用它。应该将renderItem函数中的项目绑定到您的downLoadImage函数，如下所示：

renderItem = (item) => {
  return(
    // some code
    <Button
      onPress={this.downLoadImage.bind(this, item)}
      // some props
    />
    // some code
  )
}

downloadImage = (item) => {

// do something with item
}

希望有帮助。

如何修复“找不到变量：项目”

3 个答案: