22/11/23, 16:04 FlatList · React Native
Lista plana
Uma interface de alto desempenho para renderizar listas simples e básicas, com
suporte aos recursos mais úteis:
Totalmente multiplataforma.
Modo horizontal opcional.
Retornos de chamada de visibilidade configuráveis.
Suporte de cabeçalho.
Suporte de rodapé.
Suporte separador.
Puxe para atualizar.
Carregamento de rolagem.
Suporte ScrollToIndex.
Suporte a múltiplas colunas.
Se você precisar de suporte de seção, use <SectionList> .
Texto datilografado JavaScript
[Link] 1/17
22/11/23, 16:04 FlatList · React Native
flatlist-simple
import React from 'react';
import {
SafeAreaView,
View,
First Item
FlatList,
StyleSheet,
Text,
Second Item
StatusBar,
} from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
Third Item
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({title}) => (
<View style={[Link]}>
<Text style={[Link]}>{title}</Text>
</View>
);
const App = () => {
Preview My Device iOS Android Web
Para renderizar múltiplas colunas, use a numColumns propriedade. Usar essa
abordagem em vez de um flexWrap layout pode evitar conflitos com a lógica de altura
do item.
Exemplo mais complexo e selecionável abaixo.
Ao passar extraData={selectedId} para, FlatList garantimos que FlatList ele será
renderizado novamente quando o estado mudar. Sem definir este adereço,
FlatList não saberia que precisa renderizar novamente algum item porque é um
PureComponent e a comparação do adereço não mostrará nenhuma alteração.
keyExtractor diz à lista para usar s id para as chaves de reação em vez da
key propriedade padrão.
Texto datilografado JavaScript
[Link] 2/17
22/11/23, 16:04 FlatList · React Native
flatlist-selectable
import React, {useState} from 'react';
import {
FlatList,
SafeAreaView,
First Item
StatusBar,
StyleSheet,
Text,
Second Item
TouchableOpacity,
} from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
Third Item
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({item, onPress, backgroundColor,
textColor}) => (
<TouchableOpacity onPress={onPress} style=
{[[Link], {backgroundColor}]}>
<Text style={[[Link], {color: textColor}]}>
{[Link]}</Text>
</TouchableOpacity>
Preview My Device iOS Android Web
Este é um wrapper de conveniência <VirtualizedList> e, portanto, herda seus
adereços (assim como os de <ScrollView> ) que não estão explicitamente listados
aqui, juntamente com as seguintes advertências:
O estado interno não é preservado quando o conteúdo sai da janela de
renderização. Certifique-se de que todos os seus dados sejam capturados nos
dados do item ou em armazenamentos externos como Flux, Redux ou Relay.
Isso PureComponent significa que ele não será renderizado novamente se
props permanecer superficialmente igual. Certifique-se de que tudo de que sua
renderItem função depende seja passado como um suporte (por exemplo
extraData , ) que não seja === após atualizações, caso contrário, sua UI poderá não
ser atualizada com as alterações. Isso inclui o data estado do componente prop e
pai.
[Link] 3/17
22/11/23, 16:04 FlatList · React Native
Para restringir a memória e permitir a rolagem suave, o conteúdo é renderizado de
forma assíncrona fora da tela. Isso significa que é possível rolar mais rápido do que
a taxa de preenchimento e ver momentaneamente o conteúdo em branco. Esta é
uma compensação que pode ser ajustada para atender às necessidades de cada
aplicação e estamos trabalhando para melhorá-la nos bastidores.
Por padrão, a lista procura uma key propriedade em cada item e a usa para a chave
React. Como alternativa, você pode fornecer um keyExtractor acessório
personalizado.
Referência
de lista virtualizada
Herda adereços VirtualizedList .
Obrigatório renderItem
renderItem({
item: ItemT,
index: number,
separators: {
highlight: () => void;
unhighlight: () => void;
updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
}
}): [Link];
Pega um item data e o renderiza na lista.
Fornece metadados adicionais, index se você precisar, bem como uma
[Link] função mais genérica que permite definir quaisquer adereços
que você deseja alterar a renderização do separador inicial ou do separador final, caso
[Link] 4/17
22/11/23, 16:04 FlatList · React Native
os mais comuns highlight e unhighlight (que definem o highlighted:
boolean adereço) sejam insuficientes para o seu caso de uso.
TIPO
função
item (Objeto): O item a data ser renderizado.
index (número): O índice correspondente a este item na data matriz.
separators (Objeto)
highlight (Função)
unhighlight (Função)
updateProps (Função)
select (enum('principal', 'final'))
newProps (Objeto)
Exemplo de uso:
<FlatList
ItemSeparatorComponent={
[Link] !== 'android' &&
(({highlighted}) => (
<View
style={[[Link], highlighted && {marginLeft: 0}]}
/>
))
}
data={[{title: 'Title Text', key: 'item1'}]}
renderItem={({item, index, separators}) => (
<TouchableHighlight
key={[Link]}
onPress={() => this._onPress(item)}
onShowUnderlay={[Link]}
onHideUnderlay={[Link]}>
<View style={{backgroundColor: 'white'}}>
<Text>{[Link]}</Text>
</View>
</TouchableHighlight>
)}
/>
[Link] 5/17
22/11/23, 16:04 FlatList · React Native
Obrigatório data
Uma matriz (ou lista semelhante a uma matriz) de itens a serem renderizados. Outros
tipos de dados podem ser usados direcionando VirtualizedList diretamente.
TIPO
ArrayLike
ItemSeparatorComponent
Renderizado entre cada item, mas não na parte superior ou inferior. Por padrão,
highlighted e leadingItem adereços são fornecidos. renderItem fornece
[Link] / unhighlight que atualizará o highlighted suporte, mas você
também pode adicionar acessórios personalizados com [Link] . Pode
ser um componente React (por exemplo SomeComponent ) ou um elemento React (por
exemplo <SomeComponent /> ).
TIPO
componente, função, elemento
ListEmptyComponent
Renderizado quando a lista está vazia. Pode ser um componente React (por exemplo
SomeComponent ) ou um elemento React (por exemplo <SomeComponent /> ).
TIPO
componente, elemento
ListFooterComponent
Renderizado na parte inferior de todos os itens. Pode ser um componente React (por
exemplo SomeComponent ) ou um elemento React (por exemplo <SomeComponent /> ).
[Link] 6/17
22/11/23, 16:04 FlatList · React Native
TIPO
componente, elemento
ListFooterComponentStyle
Estilo para visualização interna para ListFooterComponent .
TIPO
Ver estilo
ListHeaderComponent
Renderizado na parte superior de todos os itens. Pode ser um componente React (por
exemplo SomeComponent ) ou um elemento React (por exemplo <SomeComponent /> ).
TIPO
componente, elemento
ListHeaderComponentStyle
Estilo para visualização interna para ListHeaderComponent .
TIPO
Ver estilo
columnWrapperStyle
Estilo personalizado opcional para linhas de vários itens geradas quando numColumns >
1.
[Link] 7/17
22/11/23, 16:04 FlatList · React Native
TIPO
Ver estilo
extraData
Uma propriedade de marcador para informar a lista para renderizar novamente (já que
implementa PureComponent ). Se alguma de suas renderItem funções , Header, Footer,
etc. depender de algo fora do data suporte, cole-a aqui e trate-a de forma imutável.
TIPO
qualquer
getItemLayout
(data, index) => {length: number, offset: number, index: number}
getItemLayout é uma otimização opcional que permite pular a medição do conteúdo
dinâmico se você souber o tamanho (altura ou largura) dos itens com antecedência.
getItemLayout é eficiente se você tiver itens de tamanho fixo, por exemplo:
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
Adicionar getItemLayout pode ser um grande aumento de desempenho para listas de
centenas de itens. Lembre-se de incluir o comprimento do separador (altura ou largura)
no cálculo do deslocamento se você especificar ItemSeparatorComponent .
TIPO
função
[Link] 8/17
22/11/23, 16:04 FlatList · React Native
horizontal
Se true , renderiza itens próximos uns dos outros horizontalmente em vez de
empilhados verticalmente.
TIPO
boleano
initialNumToRender
Quantos itens renderizar no lote inicial. Isso deve ser suficiente para preencher a tela,
mas não muito mais. Observe que esses itens nunca serão desmontados como parte
da renderização em janela para melhorar o desempenho percebido das ações de
rolagem para cima.
TIPO PADRÃO
número 10
initialScrollIndex
Em vez de começar no topo com o primeiro item, comece em initialScrollIndex . Isso
desativa a otimização "rolar para cima" que mantém os primeiros
initialNumToRender itens sempre renderizados e renderiza imediatamente os itens
começando neste índice inicial. Requer getItemLayout ser implementado.
TIPO
número
inverted
Inverte a direção da rolagem. Usa transformações de escala de -1 .
[Link] 9/17
22/11/23, 16:04 FlatList · React Native
TIPO
boleano
keyExtractor
(item: ItemT, index: number) => string;
Usado para extrair uma chave exclusiva para um determinado item no índice
especificado. A chave é usada para armazenamento em cache e como chave de reação
para rastrear o reordenamento de itens. O extrator padrão verifica [Link] , then
[Link] e depois volta a usar o índice, como o React faz.
TIPO
função
numColumns
Múltiplas colunas só podem ser renderizadas horizontal={false} e ziguezaguearão
como um flexWrap layout. Os itens devem ter todos a mesma altura – layouts de
alvenaria não são suportados.
TIPO
número
onRefresh
() => void;
Se fornecido, um RefreshControl padrão será adicionado para a funcionalidade "Pull to
Refresh". Certifique-se também de definir o refreshing suporte corretamente.
[Link] 10/17
22/11/23, 16:04 FlatList · React Native
TIPO
função
onViewableItemsChanged
Chamado quando a visibilidade das linhas muda, conforme definido pela
viewabilityConfig propriedade.
TIPO
(callback: {changed: ViewToken[], viewableItems: ViewToken[]} => void;
progressViewOffset
Defina isto quando o deslocamento for necessário para que o indicador de
carregamento seja exibido corretamente.
TIPO
número
refreshing
Defina isso como verdadeiro enquanto aguarda novos dados de uma atualização.
TIPO
boleano
removeClippedSubviews
Isto pode melhorar o desempenho de rolagem para listas grandes. No Android o valor
padrão é true .
[Link] 11/17
22/11/23, 16:04 FlatList · React Native
Nota: Pode haver bugs (conteúdo ausente) em algumas circunstâncias - use por sua
conta e risco.
TIPO
boleano
viewabilityConfig
Consulte [Link] o tipo de fluxo e documentação adicional.
TIPO
VisibilidadeConfig
viewabilityConfig pega um tipo ViewabilityConfig de objeto com as seguintes
propriedades
PROPRIEDADE TIPO
mínimoViewTime número
viewAreaCoveragePercentThreshold número
itemVisiblePercentThreshold número
waitForInteraction boleano
Pelo menos um dos viewAreaCoveragePercentThreshold ou
itemVisiblePercentThreshold é obrigatório. Isso precisa ser feito para
constructor evitar o seguinte erro ( ref ):
Error: Changing viewabilityConfig on the fly is not supported
constructor (props) {
super(props)
[Link] = {
waitForInteraction: true,
[Link] 12/17
22/11/23, 16:04 FlatList · React Native
viewAreaCoveragePercentThreshold: 95
}
}
<FlatList
viewabilityConfig={[Link]}
...
Quantidade mínima de tempo (em milissegundos) que um item deve estar fisicamente
visível antes que o retorno de chamada de visibilidade seja acionado. Um número alto
significa que rolar pelo conteúdo sem parar não marcará o conteúdo como visível.
Porcentagem da janela de visualização que deve ser coberta para que um item
parcialmente ocluído seja considerado "visível", de 0 a 100. Itens totalmente visíveis
são sempre considerados visíveis. Um valor 0 significa que um único pixel na janela de
visualização torna o item visível, e um valor 100 significa que um item deve estar
totalmente visível ou cobrir toda a janela de visualização para ser considerado visível.
Semelhante a viewAreaCoveragePercentThreshold , mas considera a porcentagem do
item que está visível, em vez da fração da área visível que ele cobre.
Nada é considerado visível até que o usuário role ou recordInteraction seja chamado
após a renderização.
viewabilityConfigCallbackPairs
Lista de ViewabilityConfig / onViewableItemsChanged pares. Um específico
onViewableItemsChanged será chamado quando as ViewabilityConfig condições
correspondentes forem atendidas. Consulte [Link] o tipo de fluxo e
documentação adicional.
[Link] 13/17
22/11/23, 16:04 FlatList · React Native
TIPO
matriz de ViewabilityConfigCallbackPair
flashScrollIndicators()
flashScrollIndicators();
Exibe os indicadores de rolagem momentaneamente.
getNativeScrollRef()
getNativeScrollRef(): [Link]<typeof ScrollViewComponent>;
Fornece uma referência ao componente de rolagem subjacente
getScrollResponder()
getScrollResponder(): ScrollResponderMixin;
Fornece um identificador para o respondedor de rolagem subjacente.
getScrollableNode()
getScrollableNode(): any;
Fornece um identificador para o nó de rolagem subjacente.
[Link] 14/17
22/11/23, 16:04 FlatList · React Native
scrollToEnd()
scrollToEnd(params?: {animated?: boolean});
Rola até o final do conteúdo. Pode ser desagradável sem getItemLayout suporte.
Parâmetros:
NOME TIPO
parâmetros objeto
As chaves válidas params são:
'animado' (booleano) - Se a lista deve fazer uma animação durante a rolagem. O
padrão é true .
scrollToIndex()
scrollToIndex: (params: {
index: number;
animated?: boolean;
viewOffset?: number;
viewPosition?: number;
});
Rola até o item no índice especificado de forma que ele seja posicionado na área visível
de forma que viewPosition 0 o coloque na parte superior, 1 na parte inferior e 0,5
centralizado no meio.
Nota: Não é possível rolar para locais fora da janela de renderização sem especificar a
getItemLayout propriedade.
Parâmetros:
[Link] 15/17
22/11/23, 16:04 FlatList · React Native
NOME TIPO
parâmetros Obrigatório objeto
As chaves válidas params são:
'animado' (booleano) - Se a lista deve fazer uma animação durante a rolagem. O
padrão é true .
'index' (número) - O índice para o qual rolar. Obrigatório.
'viewOffset' (número) - Um número fixo de pixels para compensar a posição final
do alvo.
'viewPosition' (número) - Um valor 0 coloca o item especificado pelo índice na
parte superior, 1 na parte inferior e 0.5 centralizado no meio.
scrollToItem()
scrollToItem(params: {
animated?: ?boolean,
item: Item,
viewPosition?: number,
});
Requer varredura linear dos dados - use scrollToIndex em vez disso, se possível.
Nota: Não é possível rolar para locais fora da janela de renderização sem especificar a
getItemLayout propriedade.
Parâmetros:
NOME TIPO
parâmetros Obrigatório objeto
As chaves válidas params são:
'animado' (booleano) - Se a lista deve fazer uma animação durante a rolagem. O
padrão é true .
[Link] 16/17
22/11/23, 16:04 FlatList · React Native
'item' (objeto) - O item para o qual rolar. Obrigatório.
'viewPosition' (número)
scrollToOffset()
scrollToOffset(params: {
offset: number;
animated?: boolean;
});
Role até um deslocamento de pixel de conteúdo específico na lista.
Parâmetros:
NOME TIPO
parâmetros Obrigatório objeto
As chaves válidas params são:
'offset' (número) - O deslocamento para o qual rolar. Caso horizontal seja
verdadeiro, o deslocamento é o valor x, em qualquer outro caso o deslocamento é
o valor y. Obrigatório.
'animado' (booleano) - Se a lista deve fazer uma animação durante a rolagem. O
padrão é true .
Esta página é útil?
Edite essa página
Última atualização em12 de novembro de 2023
[Link] 17/17