Плоский список, охватывающий элемент с абсолютной позицией - PullRequest
Новая
       17

Плоский список, охватывающий элемент с абсолютной позицией

0 голосов
/ 04 декабря 2018

Я пытался создать представление о том, что мне нужно перейти к плоскому списку, чтобы при нажатии на него пользователь мог достичь вершины. Но плоский список покрывал этот элемент. 

<View style={{backgroundColor:'#e6e6e6',flex:1,}>
    <View style={{position:'absolute'}}>
        <Text>Scroll To Reload</Text>
    </View>
    <FlatList refreshing={this.state.refresh} onRefresh={()=>this.refreshAllTweets()}
        data={tweets}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) =>
        <TweetItem onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)}
            onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
            />
</View>

1 Ответ

0 голосов
/ 04 декабря 2018

Каждый дочерний элемент отображается в порядке и в конечном итоге накладывается друг на друга, пока не будут отображены все дочерние элементы.Поскольку представление, которое вы хотите наверху, визуализируется первым, оно будет внизу.Измените свой код так, чтобы представление, которое вы хотите сверху, отображалось последнимт.е. переместите его в нижнюю часть вида. 

<View style={{backgroundColor:'#e6e6e6',flex:1}}>
  <FlatList
    refreshing={this.state.refresh}
    onRefresh={()=>this.refreshAllTweets()}
    data={tweets}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({item}) => <TweetItem  onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)} onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
    />
  <View style={{position:'absolute', top: 0}}>
    <Text>Scroll To Reload</Text>
  </View>
</View>

Поскольку вид теперь абсолютно позиционирован, вы можете захотеть присвоить ему фактическую позицию.

Обновление для комментария Плоский список, охватывающий элемент с абсолютной позицией

FlatLast имеет реквизит ListFooterComponent он принимает класс компонента React, функцию рендеринга или визуализированный элемент.Таким образом, вы можете обновить свой FlatList, добавив следующую подпорку. 

<FlatList
  ...
  ListFooterComponent={ 
   <View>
     <Text>Scroll To Reload</Text>
   </View>
  }
/>

Это прикрепит вид в качестве нижнего колонтитула к FlatList, так что он будет виден, когда будет достигнут нижний предел вашего FlatList.

Проверьте документы для получения дополнительной информации о FlatLists .

...