React Native: Как применить contentContainerStyle ListView к renderRow() для создания сетки при использовании renderHeader()?

Question

Я стараюсь следовать этому: ListView grid in React Native, но с renderHeader(). Когда у меня есть и renderHeader() и renderRow() с

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

, весь ListView влияет, смещается влево, и renderRow() исчезает.

Но когда я вынимаю renderHeader(), он создает сетку renderRow() отлично без каких-либо проблем. Итак, как я могу использовать contentContainerStyle ListView только для того, чтобы повлиять на renderHeader(), чтобы создать сетку, а также иметь 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> 
); 

Заранее спасибо!

Answer 1

В настоящее время ListView все в <ScrollView contentContainerStyle>{renderHeader}{renderRow}{renderRow}{renderFooter}</ScrollView> вид структуры. Помня об этом, вы сможете объяснить возникшие проблемы форматирования.

Я думаю, что лучший вариант на данный момент, является пометка стиля вашего заголовка с {width: Dimensions.get('window').width}, чтобы убедиться, что в нем используется полный ряд (или независимо от ширины вашего <ListView>.

Я по-прежнему возникает проблемы с этим, поскольку я использую {alignSelf: 'center'} на моем ListView содержимом, и поэтому размер заголовка будет влиять и изменять выравнивание содержимого renderRow. Но если вы этого не делаете, у вас не должно быть проблем с ним.