元素如何絕對定位伸展超級scrollView？反應原生

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

這是我的錯。我在React.Children.forEach中設置了錯誤的位置attribute。我在css中被absolute position元素誤導，這些元素不能拉伸超級元素。實際上，ReactNative中絕對定位的元素可以延伸到scrollview。

Answer 2

做一個小的改變

HTML：

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

CSS：

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

如果你是給更多的代碼行，我們可以找到一個更好的解決方案