Question

这是渲染功能：

React.Children.forEach(children, (item, index) => {
  let image = React.cloneElement(item, {
        style: [item.props.style, styles.image],
      });
  items.push(
    <TouchableHighlight key={'touch_'+index} style={[styles.item]}>
      {image}
    </TouchableHighlight>
  );
});

return (
  <Modal visible={this.props.isOpen}>
    <ScrollView
      pagingEnabled={true}
      horizontal={true}>
        {items}
    </ScrollView>
  </Modal>
);

以下是元素的样式：

item: { flex: 1, backgroundColor: 'yellow' }, image: { position: 'absolute', margin: 0, width: WINDOW_WIDTH, height: WINDOW_HEIGHT, }

每个item都是绝对定位的，但我无法滚动scrollView，就像只有一个页面（项目）一样，因为所有图片都重叠了

Answer 1

做一个小改动

HTML ：

<ScrollView pagingEnable={true} horizontal={true}>
  <div class="item">{items}</div>
</ScrollView>

<强> CSS：

div.item{
 position: relative;
}
ScrollView{
 position: absolute;  /*mentioned in the question */
}

如果您提供更多代码，我们可以找到更好的解决方案

Answer 2

这是我的错。我在attribute中设置错误的排名React.Children.forEach。我被absolute position中的css元素误导了，这些元素无法伸展超级元素。实际上，ReactNative中绝对定位的元素可以延伸scrollview。

如何将元素绝对定位拉伸超级scrollView？反应母语

2 个答案: