Задача, потерянная для запроса в реакции-родной - что это значит?

Я пытаюсь построить сетку для плит с кнопками и другими действиями. Я искал попытку с помощью источника исходных изображений сетки для родных игровых площадок, чтобы найти здесь. Он создает следующие "stacktrace" и ошибку при добавлении 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
  }
})

ОТВЕТЫ

Ответ 1

Это может иметь какое-то отношение к способу рендеринга. Ваш запрос кажется застрявшим. Похоже, что это код, в котором ошибка возникает в RN (из 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;
  }
}

Я не совсем уверен, как это решить, но пару идей, которые помогут вам отлаживать:

  • Компонент <Image> имеет некоторые функции и обратные вызовы, которые вы могли бы использовать, чтобы попытаться продолжить отслеживание проблемы (onLoad, onLoadEnd, onLoadStart, onError, onProgress). Последние два относятся только к iOS, но вы можете увидеть, вызвано ли какое-либо из них, чтобы увидеть, где в процессе происходит зависание.

  • В качестве альтернативы, я бы это сделал, чтобы использовать ListView и поместить URL-адреса изображения в поддержку datasource для ListView (используя метод _.chunk, чтобы сгруппировать их, как вы уже знаете). Это было бы немного более чистым способом предоставления им IMO

Ответ 3

Я думаю, что эта проблема, возможно, связана с тем, что вы пытаетесь загрузить изображения http в ios. Я получаю ту же ошибку в моем проекте, когда использую более точные изображения в моих начальных данных на ios (android не волнует), которые возвращаются только с http. Вот лучшее объяснение, которое я нашел в этой теме: React-native загрузка изображения через https работает, а http не работает