React Native中请求被孤立的任务是什么意思？

Question

我正在尝试为具有按钮和其他操作的瓦片构建网格系统。我以 react native playground 网格图像源为基础进行了改造，您可以在这里找到它。当向个别图片添加zIndex时，它会生成以下“堆栈跟踪”和错误。图片从未被呈现。

如果您感兴趣，这就是我使用的确切组件：

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
  }
})

- jsdario

---

许多人都遇到了同样的问题，似乎是RN的一个bug。https://github.com/facebook/react-native/issues/12152 https://github.com/facebook/react-native/issues/10731 - pmont

Answer 1

可能与您的渲染方式有关。您的请求似乎被卡住了。从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;
  }
}

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

1. <Image>组件有一些函数和回调函数，您可以利用它们来进一步跟踪问题（onLoad、onLoadEnd、onLoadStart、onError和onProgress）。后两个仅适用于iOS，但您可以查看是否调用了其中任何一个以确定在哪个过程中出现了问题。

2. 或者，我会使用ListView，并将图像URL放置在ListView的datasource属性中（正如您已经使用_.chunk方法对它们进行分组一样）。这将是一种更加清晰的呈现方式。

- Jason Gaare

---

删除图像元素确实使应用程序正常工作，所以肯定有某种关联。不幸的是，我现在无法重现错误。我将等待一段时间再发布奖励，让其他人尝试。 - jsdario

我遇到了相同的错误，可能是React Native中的一个bug？ - Computer's Guy

Answer 2

我认为这个问题可能与你在ios中尝试加载http图片有关。当我在我的ios种子数据中使用虚假图片时（android不在意），会出现同样的错误。这些图片只返回http。关于这个主题，我在React-native loading image over https works while http does not work上找到了更好的解释。

- LTFoReal

Answer 3

根据React Native的规定，最好将项目组件作为纯组件，并且应该将要渲染到该组件中的所有数据都放在该组件对象本身中以获得更好的性能。至于图片的处理方式，我也不是很清楚。从URL加载图片可能不属于项目对象本身。然而，我也遇到了这个问题，我正在调用一个函数来加载与应用程序打包在一起的图标。

- Khim Bahadur Gurung