在 react-native 中请求孤立的任务是什么意思? [英] Task orphaned for request in react-native – what does it mean?

问题描述

我正在尝试为带有按钮和其他操作的图块构建一个网格系统.我尝试使用 React Native 游乐场网格图像源进行分叉，您可以在

如果您有兴趣，这正是我正在使用的组件:

export default class GridLayout extends Component {构造函数(){极好的()const { 宽度，高度 } = Dimensions.get('window')this.state = {当前屏幕宽度:宽度，当前屏幕高度:高度}}handleRotation(事件){var layout = event.nativeEvent.layoutthis.setState({ currentScreenWidth: layout.width, currentScreenHeight: layout.height })}计算尺寸(){var size = this.state.currentScreenWidth/IMAGES_PER_ROW返回 { 宽度:大小，高度:大小 }}渲染行(图像){返回 images.map((uri, i) => {返回 (<Image key={i} style={[styles.image, this.calculatedSize()]} source={{uri: uri}}/>)})}renderImagesInGroupsOf(计数){返回 _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow) => {console.log('正在绘制的行')返回 (<查看键={uuid.v4()} style={styles.row}>{this.renderRow(imagesForRow)}</查看>)})}使成为 () {返回 (<ScrollView style={styles.grid} onLayout={(ev) =>this.handleRotation(ev)} contentContainerStyle={styles.scrollView}>{this.renderImagesInGroupsOf(IMAGES_PER_ROW)}</ScrollView>)}}var 样式 = StyleSheet.create({网格: {弹性:1，背景颜色:'蓝色'},排: {flexDirection: '行',alignItems: '中心',justifyContent: 'flex-start',背景颜色:'洋红色'},图像: {zIndex: 2000}})

解决方案

这可能与您的渲染方式有关.您的请求似乎卡住了.看起来这是RN中抛出错误的代码(来自RCTImageLoader.m):

//移除已完成的任务对于(RCTNetworkTask *_pendingTasks.reverseObjectEnumerator 中的任务){开关(任务.状态){案例RCTNetworkTaskFinished:[_pendingTasks removeObject:task];_activeTasks--;休息;案例RCTNetworkTaskPending:休息;案例 RCTNetworkTaskInProgress://检查任务没有卡住"如果(task.requestToken == nil){RCTLogWarn(@"任务孤立请求%@", task.request);[_pendingTasks removeObject:task];_activeTasks--;【任务取消】；}休息;}}

我不确定如何解决这个问题，但有一些想法可以帮助您进行调试:

1. 组件具有一些函数和回调，您可以利用它们来尝试进一步追踪问题(onLoad、onLoadEnd、onLoadStart、onError、onProgress).后两个仅适用于 iOS，但您可以查看是否调用了其中的任何一个，以查看进程中的哪些地方出现问题.

2. 或者，我这样做的方法是使用 ListView 并将图像网址放在 ListView 的 datasource 道具中(利用 _.chunk 方法将它们分组，就像您已经做的那样).这将是一种更简洁的呈现它们的方式 IMO

I am trying to build a grid system for tiles with buttons and other actions. I forked trying with the react native playground grid images source, that you can find here. It produces the following "stacktrace" and error when adding zIndex to individual pics. Images are never portrayed.

In case you are interested this is the exact component I am using:

export default class GridLayout extends Component {
  constructor () {
    super()
    const { width, height } = Dimensions.get('window')
    this.state = {
      currentScreenWidth: width,
      currentScreenHeight: height
    }
  }

  handleRotation (event) {
    var layout = event.nativeEvent.layout
    this.setState({ currentScreenWidth: layout.width, currentScreenHeight: layout.height })
  }

  calculatedSize () {
    var size = this.state.currentScreenWidth / IMAGES_PER_ROW
    return { width: size, height: size }
  }

  renderRow (images) {
    return images.map((uri, i) => {
      return (
        <Image key={i} style={[styles.image, this.calculatedSize()]} source={{uri: uri}} />
      )
    })
  }

  renderImagesInGroupsOf (count) {
    return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow) => {
      console.log('row being painted')
      return (
        <View key={uuid.v4()} style={styles.row}>
          {this.renderRow(imagesForRow)}
        </View>
      )
    })
  }

  render () {
    return (
      <ScrollView style={styles.grid} onLayout={(ev) => this.handleRotation(ev)} contentContainerStyle={styles.scrollView}>
        {this.renderImagesInGroupsOf(IMAGES_PER_ROW)}
      </ScrollView>
    )
  }
}

var styles = StyleSheet.create({

  grid: {
    flex: 1,
    backgroundColor: 'blue'
  },

  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    backgroundColor: 'magenta'
  },

  image: {
    zIndex: 2000
  }
})

解决方案

It may have something to do with the way you are rendering. Your request seems to get stuck. It looks like this is the code where the error is thrown in RN (from RCTImageLoader.m):

// Remove completed tasks
for (RCTNetworkTask *task in _pendingTasks.reverseObjectEnumerator) {
  switch (task.status) {
    case RCTNetworkTaskFinished:
      [_pendingTasks removeObject:task];
      _activeTasks--;
      break;
    case RCTNetworkTaskPending:
      break;
    case RCTNetworkTaskInProgress:
      // Check task isn't "stuck"
      if (task.requestToken == nil) {
        RCTLogWarn(@"Task orphaned for request %@", task.request);
        [_pendingTasks removeObject:task];
        _activeTasks--;
        [task cancel];
      }
      break;
  }
}

I'm not exactly sure how to solve this, but a couple ideas to help you debug:

1. The <Image> component has some functions and callbacks that you could utilize to try to further track down the issue (onLoad, onLoadEnd, onLoadStart, onError, onProgress). The last two are iOS only but you could see if any of those are called to see where in the process things get hung up.

2. Alternatively, the way I would do this would be to use a ListView and place the image urls in the datasource prop for the ListView (utilizing the _.chunk method to group them as you already do). This would be a little cleaner way of rendering them IMO

这篇关于在 react-native 中请求孤立的任务是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！