我正在try 为带有按钮和其他动作的瓷砖构建一个网格系统.我try 了react-native playground 网格图像源,你可以找到here个.将zIndex添加到单个图片时,会产生以下"stacktrace"和错误.图像永远不会被描绘出来.

enter image description here

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

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

我不确定如何解决这个问题,但有几个 idea 可以帮助您调试:

  1. <Image>组件有一些函数和回调,您可以利用它们来进一步跟踪问题(onLoadonLoadEndonLoadStartonErroronProgress).最后两个只是iOS,但你可以看到是否调用了其中任何一个,以查看在这个过程中出现了什么问题.

  2. 或者,我这样做的方式是使用ListView并将图像URL放置在ListView的datasourceprops 中(使用_.chunk方法将它们分组,就像您已经做的那样).这将是一种更干净的方式来呈现它们

React-native相关问答推荐

React Native 的 Firebase 初始错误(无法读取未定义的属性getItem)

PanResponder 在第二次拖动时将 Animated.View 捕捉回原始位置

判断状态对象是否为空

No component found for view with name "ARTShape"

redux-observable 您在预期流的地方提供了 undefined

Invariant Violation:Chrome 不支持在本机模块上调用同步方法

React Native 用于低互联网带宽的小型 apk APP应用

你如何在生产模式下运行 react-native 应用程序?

使用 AsyncStorage 如何以及在何处保存整个 redux 存储

react-native android中出现此问题Cannot convert argument of type class org.json.JSONArray的原因是什么?

如何在 react-native 上自动聚焦下一个 TextInput

当 textInput 聚焦时,第一次touch flatList 不起作用,但是第二次起作用

React native + redux-persist:如何忽略键(黑名单)?

React Native + Jest EMFILE:too many open files error

React Native STUCK 启动打包器

在Android上更改高度时react-native TextInput显示错误

如何在 Expo 和 React Native 中使用绝对路径导入?

React Native - 为什么执行这个函数?

React Native 必须双击才能使 onPress 工作

StackNavigator中如何改变动画的方向?