我正在尝试为带有按钮和其他操作的图块构建一个网格系统。我分叉尝试使用 React Native Playground 网格图像源,你可以找到here https://rnplay.org/apps/sXriww。添加时会产生以下“堆栈跟踪”和错误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
}
})
这可能与你的渲染方式有关。你的请求似乎被卡住了。看起来这是 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;
}
}
我不太确定如何解决这个问题,但有一些想法可以帮助您调试:
The <Image>
组件有一些函数和回调,您可以利用它们来尝试进一步追踪问题(onLoad
, onLoadEnd
, onLoadStart
, onError
, onProgress
)。最后两个仅适用于 iOS,但您可以查看是否调用其中任何一个来查看过程中的何处挂起。
或者,我这样做的方法是使用 ListView 并将图像 url 放在datasource
ListView 的 prop(利用_.chunk
像您已经做的那样对它们进行分组的方法)。在我看来,这将是一种更干净的渲染方式
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)