Wie strecken Elemente absolut positioniert super scrollView? reagieren-native

Question

Hier ist die Render-Funktion:

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

und hier sind die Arten des Elements:

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

Jeder item ist absolut positioniert, aber ich kann die scrollView nicht bewegen, nur wie es gibt nur eine Seite (Artikel), weil alle Bilder überlappten

Answer 1

Es ist meine Schuld finden. Ich habe die falsche Position attribute in React.Children.forEach gesetzt. Ich wurde durch absolute position Element in css fehlgeleitet, diese Elemente können Superelement nicht dehnen. Tatsächlich können Elemente, die absolut in ReactNative positioniert sind, scrollview dehnen.

Answer 2

Machen Sie eine kleine Änderung

HTML:

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

CSS:

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

Wenn Sie mehr Codezeilen geben, können wir eine bessere Lösung