0

我正在从 api 读取数据并在平面列表中显示此数据，此数据是一堆文档，每当用户按下任何项目时，它都会将他带到该文档，我下载此文档以便用户可以阅读它离线模式。我现在要做的是从每个实体旁边的平面列表中显示此文件是否已下载。我已经知道如何检查文件是否存在并且 m 得到正确的结果，但是 m 无法在平面列表中显示相应的图标。

检查文件的代码：

checkFiles = (file) => {
const url = file
let fileName = file.split('/')[5]
RNFS.mkdir(`${RNFS.DocumentDirectoryPath}` + '/Duaas')
let localFile = `${RNFS.DocumentDirectoryPath}` + '/Duaas/' + fileName;

RNFS.exists(localFile).then(async exists => {
  if (!exists) {
    return <Icon name={"file-download"} size={20} color={'#94b4ec'} />
  } else {
    return <Icon name={"file-download-done"} size={20} color={'#94b4ec'} />
  }
    })
  }

我调用函数的代码：

returnDoaa = (obj) => {
    return <TouchableOpacity disabled={this.state.loading} style={{ marginVertical: 5 }}
      onPress={() => this.props.navigation.navigate('DoaaDetails', { file: Server.getUrl(obj.item.file), title: obj.item.title, updatedAt: obj.item.updatedAt })}>
      <View style={styles.rowContainer}>
        {this.checkFiles(Server.getUrl(obj.item.file))}
        <SkeletonContent
          key={obj.item.id}
          containerStyle={{ flex: 1, flexDirection: "row", alignItems: 'center' }}
          isLoading={this.state.loading}
          layout={[
            { key: obj.item.id, width: 200, height: 10, },
          ]}
        >
          <Text style={styles.rowText}>{obj.item.title}</Text>
        </SkeletonContent>
        {this.state.loading != true && <View style={styles.rightView}>
          <Image tintColor={Color.black} style={{ height: 10, width: 10 }} resizeMode="contain" source={require('../../images/backArrowBlack.png')} />
        </View>}
      </View>
      <View style={{ borderColor: Color.silver, borderTopWidth: 0.6 }}></View>
     </TouchableOpacity>
      }

如果我让 checkFiles 方法直接返回图标，它会显示它，但是当我添加代码以检查文件是否存在时，它什么也不显示。那么我该如何解决这个问题？

4

1 回答 1

0

我使用的解决方案是更改 checkFiles 方法以更新保存文档的状态，如下所示：

   async checkFiles() {
    for (const duaa of this.state.doaas) {
    const url = Server.getPhotoUrl(duaa.file)
    let fileName = Server.getPhotoUrl(duaa.file).split('/')[5]
    RNFS.mkdir(`${RNFS.DocumentDirectoryPath}` + '/Duaas')
    let localFile = `${RNFS.DocumentDirectoryPath}` + '/Duaas/' + fileName;

    RNFS.exists(localFile).then(async exists => {
      if (!exists) {
        this.updateStorageState(duaa, false)
      } else {
        this.updateStorageState(duaa, true)
      }
    })}
  }

  updateStorageState(duaa, exists) {
    updatedDuaas = this.state.doaas.map((item) => {
      if (item.id === duaa.id) {
        return {
          ...item,
          downloaded: exists
        }
      }
      return item
    })
    this.setState({ doaas: updatedDuaas})
  }

在 returnDoaa 方法中，我根据状态设置图标条件，如下所示：

   returnDoaa = (obj) => {
    return <TouchableOpacity disabled={this.state.loading} style={{ marginVertical: 5 }}
      onPress={() => this.props.navigation.navigate('DoaaDetails', { file: Server.getUrl(obj.item.file), title: obj.item.title, updatedAt: obj.item.updatedAt })}>
      <View style={styles.rowContainer}>
        <SkeletonContent
          key={obj.item.id}
          containerStyle={{ flex: 1, flexDirection: "row", alignItems: 'center' }}
          isLoading={this.state.loading}
          layout={[
            { key: obj.item.id, width: 200, height: 10, },
          ]}
        >
          {obj.item.downloaded ? <Icon name={"file-download-done"} size={20} color={'#94b4ec'} /> : <Icon name={"file-download"} size={20} color={'#94b4ec'} />}
          <Text style={styles.rowText}>{obj.item.title}</Text>
        </SkeletonContent>
        {this.state.loading != true && <View style={styles.rightView}>
          <Image tintColor={Color.black} style={{ height: 10, width: 10 }} resizeMode="contain" source={require('../../images/backArrowBlack.png')} />
        </View>}
      </View>
      <View style={{ borderColor: Color.silver, borderTopWidth: 0.6 }}></View>
    </TouchableOpacity>
  }
于 2021-03-23T16:01:01.250 回答