React Native: Wie man den contentContainerStyle von ListView auf renderRow() anwendet, um ein Raster zu erstellen, während man renderHeader() hat?

Question

Ich versuche, dies zu folgen: ListView grid in React Native aber auch mit renderHeader(). Wenn ich beide renderHeader haben() und renderRow() mit dem

contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}} 

wird die gesamte Listview betroffen sind, verschiebt sich nach links, und die renderRow() verschwindet.

Aber wenn ich die renderHeader() herausnehmen, erstellt es das Raster von renderRow() perfekt ohne irgendwelche Probleme. Wie kann ich also mit dem contentContainerStyle von ListView arbeiten, um renderHeader() zu beeinflussen, um das Grid zu erstellen, und auch renderHeader()?

return (
    <View style={{flex: 1}}> 
    <ListView 
     contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}} 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow.bind(this)} 
     renderHeader={this.renderHeader.bind(this)} 
    /> 
    </View> 
); 

Vielen Dank im Voraus!

Answer 1

Momentan steckt ListView alles in einer <ScrollView contentContainerStyle>{renderHeader}{renderRow}{renderRow}{renderFooter}</ScrollView> Ansichtsstruktur. Dies wird Ihnen helfen, die Formatierungsprobleme zu erklären, die Sie sehen.

Ich denke, die beste Option zur Zeit, Ihre Header Stil ist mit {width: Dimensions.get('window').width}, zu markieren, um sicherzustellen, dass es eine vollständige Reihe (oder was auch immer die Breite Ihrer <ListView> verbraucht.

Ich habe immer noch Probleme mit diesem, wie ich {alignSelf: 'center'} auf meinem ListView Inhalt verwenden, und so die Größe des Headers beeinflussen/ändern Sie die Ausrichtung der RenderRow Inhalte auch. Aber wenn Sie das nicht tun, sollten Sie kein Problem damit haben.