Второй плоский список перекрывает первый плоский список - PullRequest
Новая
       2

Второй плоский список перекрывает первый плоский список

1 голос
/ 20 марта 2019

Я написал код в ScrollView, где мне нужно было показать 2 view компоненты: - 

<ScrollView 
    scrollEnabled={this.state.scrollEnable} 
    ref={ref => this.scrollView = ref} 
    onContentSizeChange={(contentWidth, contentHeight) => { 
        this.scrollView.scrollToEnd({ animated: true }); }} 
>
            <View pointerEvents="none">
                {this.state.TempView}
            </View>
            <View>
                {this.state.MainScrollView}
            </View>
</ScrollView >

Я хотел использовать его с FlatList, поэтому я сделал это так: -

<FlatList
    scrollEnabled={this.state.scrollEnable}
    ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight) => { 
        this.scrollView.scrollToEnd({ animated: true }); }}
        data={this.state.TempView}
        renderItem={({ item }) => (
            <View>{item}</View>
        )}
        keyExtractor={(item, index) => index.toString()}
/>
<FlatList
    scrollEnabled={this.state.scrollEnable}
    ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight) => { 
        this.scrollView.scrollToEnd({ animated: true }); }}
        data={this.state.MainScrollView}
        renderItem={({ item }) => (
            <View>{item}</View>
        )}
        keyExtractor={(item, index) => index.toString()}
/>

Но вторые данные FlatList присутствуют над первыми .... в результате данные обоих FlatList отображаются на одном экране.Что делать?

1 Ответ

0 голосов
/ 20 марта 2019

Хорошо, я нашел это ... Я установил данные первого FlatList в ListHeaderComponent реквизит FlatList. Код результата: - 

<FlatList
    scrollEnabled={this.state.scrollEnable}
    style={s}
    ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight) => { 
        this.scrollView.scrollToEnd({ animated: true }); }}
    ListHeaderComponent={<View>{this.state.TempView}</View>}
    data={this.state.MainScrollView}
    renderItem={({ item }) => (
        <View>{item}</View>
    )}
    keyExtractor={(item, index) => index.toString()}
/>
...