Задача, потерянная для запроса в реакции-родной - что это значит?
Я пытаюсь построить сетку для плит с кнопками и другими действиями. Я искал попытку с помощью источника исходных изображений сетки для родных игровых площадок, чтобы найти здесь. Он создает следующие "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
Ответ 2
Многие люди сталкиваются с той же проблемой. Кажется, это ошибка RN.
https://github.com/facebook/react-native/issues/12152
https://github.com/facebook/react-native/issues/10731
Ответ 3
Я думаю, что эта проблема, возможно, связана с тем, что вы пытаетесь загрузить изображения http в ios. Я получаю ту же ошибку в моем проекте, когда использую более точные изображения в моих начальных данных на ios (android не волнует), которые возвращаются только с http. Вот лучшее объяснение, которое я нашел в этой теме: React-native загрузка изображения через https работает, а http не работает