在 recyclerListvView React Native

问题描述

我需要从互联网下载文件，为此我使用的是 react-native-background-downloader。 我正在使用 [recyclerlistview][1] 来显示列表数据。里面的列表我有进度条。问题是即使在更新值后进度条也不显示进度。这是我的代码

const dataProviderMaker = (data) => new DataProvider((r1,r2) => r1 !== r2).cloneWithRows(data)
const App= (props) => {
     const [dataProvider,setDataProvider] = useState(dataProviderMaker({}))
     const _layoutProvider = useRef(layoutMaker()).current
     const [data,setData] = useState({})
     const NOT_DOWNLOADED = 0
     const DOWNLOADING = 1
     const DOWNLOADED = 2

      const fetchContent = async () => {
          try {
             await fetch(url,{ method: 'GET'},)
                 .then((response) => response.json())
                 .then((resData) => {
                     if (resData.error) {
                         return
                     }
                     resData.map((d) => addkeyvalue(d,'icon',false))
                     resData.map((d) => addkeyvalue(d,'progress',0))
                     resData.map((d) => addkeyvalue(d,'offline',NOT_DOWNLOADED))
                     setDataProvider(dataProviderMaker(resData))
                     setData(resData)
                })
        } catch (e) {
             alert('Network problem. Check your internet connection')
             }
     }
     const addkeyvalue = (obj,key,data) => { obj[key] = data }
     const downloadFile = (da) => {
         var item = data.findindex((x) => x.ID == da.ID)
         var d = [...data]
         da.offline = DOWNLOADING
         d[item] = da
         setData(d)

    let task = RNBackgroundDownloader.download({
        id: da.ID,url: da.FILE_URL,destination: `${RNBackgroundDownloader.directories.documents}/video`
      }).begin((expectedBytes) => {
            console.log(`Going to download ${expectedBytes} bytes!`)
      }).progress((percent) => {
          console.log(`Downloaded: ${percent * 100}%`)
          da.progress = percent
          d[item] = da
          setData(d)
      }).done(() => {
         da.progress = 1
         da.offline = DOWNLOADED
         d[item] = da
         setData(d)
     }).error((error) => {
         console.log('Download canceled due to error: ',error);
     })
   }


 useEffect(() => { fetchContent() },[])
 useEffect(() => {
     setDataProvider(dataProviderMaker(data))
 },[data])

 return (
<View>
    <RecyclerListView
      layoutProvider={_layoutProvider}
      dataProvider={dataProvider}
      roWrenderer={roWrenderer}
    />
</View>)
 }

这是 roWrenderer

const roWrenderer = (type,d) => {

  return (
    <CellContainer style={{ flexDirection: 'row',borderBottomColor: '#424242',borderBottomWidth: 0.3,}}>
      <TouchableOpacity style={styles.listContainer} onPress={() => navigate(data)}>
        <Image style={{ borderRadius: 4,height: 60,margin: 4,padding: 4,width: 80,}} source={require('../../asset/videologo.jpg')} />
        <View style={{ flex: 1,flexDirection: 'column',justifyContent: 'space-between',}}>
          <ProgressBar progress={d.progress} color="#8446b3" />
          
        </View>
      </TouchableOpacity>
      <TouchableOpacity style={{ flex: 1,justifyContent: 'center',alignItems: 'center',}}
        onPress={() => {
          downloadFile(d)
        }}>
           <Icon name='download-circle' size={30} color="#898989" />
      </TouchableOpacity>
    </CellContainer>
  )
}

.

const layoutMaker = () => new LayoutProvider(
  (index) => {
    return ViewTypes.FULL;
  },(type,dim) => {
    dim.width = width;
    dim.height = 70;
  },)

class CellContainer extends React.Component {
  constructor(args) {
    super(args);
    this._containerId = containerCount++
  }
  render() {
    return <View {...this.props}>{this.props.children}</View>
  }
}

一切正常，唯一的问题是progressBar UI没有更新。甚至状态中的值也会正确更新。 [1]：https://github.com/Flipkart/recyclerlistview

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）