react native complete flatlist
Accept all props for
Version étendue de la liste plate native React avec de nombreuses fonctions intégrées telles que Recherche, Pull to Refrex, pas de données Données disponibles si vide
Prudence:
renderItem Props Return item and index Paramètres Le paramètre item renvoie un seul élément dans le tableau item . Mais si le texte de recherche n'est pas vide Dan highlightColor les accessoires sont définis sur n'importe quelle couleur, le paramètre item renverra une nouvelle structure de l'objet JSON (afin de rendre le texte en surbrillance en surbrillance dans JSX). Cela pourrait briser votre logique. Par conséquent, si vous souhaitez accéder à la structure d'origine de vos données, elle sera sous item.cleanData . N'oubliez pas que item.cleanData accessoires highlightColor les accessoires et la recherche TextField ne sont pas vides (l'utilisateur est à la recherche)
Utilisation:
import React, {useRef} from 'react';
import { Text, SafeAreaView, TouchableOpacity } from 'react-native';
import CompleteFlatList from 'react-native-complete-flatlist';
const list = [
{ name: 'Fattah', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
{ name: 'Syah', status: 'Active', time: '9:14 PM', date: '1 Dec 2018' },
{ name: 'Izzat', status: 'Active', time: '8:15 PM', date: '1 Jan 2018' },
{ name: 'Ali', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
{ name: 'Abu', status: 'Active', time: '8:11 PM', date: '1 Jan 2018' },
{ name: 'Fitri', status: 'Active', time: '8:20 PM', date: '1 Jan 2018' },
{ name: 'Armi', status: 'Active', time: '8:33 PM', date: '1 Jan 2018' },
{ name: 'Eidit', status: 'Active', time: '9:10 PM', date: '1 Jan 2018' },
{ name: 'Hamdan', status: 'Active', time: '10:10 PM', date: '1 Jan 2018' },
{
name: 'Muhyiddeen',
status: 'Blocked',
time: '10:10 PM',
date: '9 Feb 2018',
},
];
const App = () => {
const ref = useRef();
const renderItem = ({item, index}) => {
const data = item.cleanData ? item.cleanData : item;
console.log('item (if search bar is not empty and prop highlightColor is not empty, item will contains extra data to enable highlight feature)', item);
console.log('cleanData (if search bar is not empty and prop highlightColor is not empty, cleanData will contain original data structure without extra data)', item.cleanData);
console.log('this is index number : ' + index);
console.log(data + ' this is original data');
return <Text>{item.name}</Text>;
};
return (
<SafeAreaView style={{ flex: 1 }}>
<CompleteFlatList
searchKey={['name', 'status', 'time', 'date']}
pullToRefreshCallback={() => console.log('refreshing')}
data={list}
// renderSeparator={null}
ref={ref}
highlightColor="yellow"
renderItem={renderItem}
/>
<TouchableOpacity onPress={() => ref.current.clearSearch()} style={{ padding: 5 }}>
<Text>Clear Search</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
export default App;
Changement par rapport à renderItem={(data, index) => {} } à renderItem={({item, index, separators}) => {} } (similaire comme le ON dans la liste plate d'origine)
Tous les accessoires à liste plate doivent fonctionner plus les accessoires mentionnés ci-dessous
| Soutenir | Taper | Description | Défaut | Requis |
|---|---|---|---|---|
showSearch | booléen | Si true (et searchKey Prop est défini), la barre de recherche sera affichée. | vrai | Facultatif |
isJelly | booléen | Si true , lorsque l'utilisateur défile, la liste élargira un peu de bit, et lorsque l'utilisateur arrête de glisser, la liste reviendra à la taille d'origine (iMessage sur le style iPhone) | FAUX | Facultatif |
slide | chaîne | Animation comment tous les éléments entrent dans la liste. Peut être "aucun", "gauche" ou "droite" | none | Facultatif |
data | tableau d'objets | Données à rendre dans la liste | [] | Requis (allez, bien sûr, vous avez besoin de données pour cela) |
backgroundStyles | objet de style | Style de l'arrière-plan de la plaque plate | nul | Facultatif |
searchBarBackgroundStyles | objet de style | Style de l'arrière-plan de la barre de recherche | nul | Facultatif |
pullToRefreshCallback | fonction | Fonction de rappel lorsque l'utilisateur tire pour actualiser | nul | Facultatif (Pull to Refresh ne sera pas disponible si cela n'est pas fourni |
isLoading | booléen | Si c'est vrai, le chargement sera affiché en haut de la liste. | FAUX | Facultatif |
renderItem | Fonction qui renvoie un élément JSX (tout comme ListView et Flatlist de RN) | Modèle d'une ligne dans la liste plate | null (ouvrir pour PR si quelqu'un souhaite faire un modèle par défaut pour cela) | Requis (puisque je ne fais pas encore le modèle par défaut) |
renderSeparator | Fonction qui renvoie un élément JSX à rendre entre les lignes (tout comme ListView et Flatlist de RN) | Modèle de séparateur dans la liste plate | () => <View style={{ height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" }} /> | Facultatif |
placeholder | chaîne | Place d'espace de champ de recherche | "Recherche ..." | Facultatif |
searchTextInputStyle | objet (style pour le composant TextInput de React Native) | Style pour le champ de recherche | nul | Facultatif |
highlightColor | couleur | Couleur de l'arrière-plan des mots HigLited lors de la correspondance de la recherche de recherche. Veuillez lire la pré-prudence si vous utilisez cet accessoire au-dessus de la lecture | jaune | Facultatif |
searchKey | tableau de chaîne | Cela devrait être le nom des clés disponibles dans les données qui seront utilisées pour rechercher. Si cet accessoire n'est pas fourni, la saisie de texte de recherche ne sera pas rendue. **Warning: nested key not yet supported | [] | Facultatif (s'il n'est pas fourni, le champ de recherche n'apparaîtra pas) |
elementBetweenSearchAndList | Élément JSX | Que rendre entre la barre de recherche et la liste | nul | Facultatif |
refreshOnLoad | booléen | Si true , le pullToRefreshCallback sera appelé si disponible | vrai | Facultatif |
onSearch | Fonction qui remplacera pullToRefreshCallback | S'il existe, pullToRefreshCallback sera remplacé. Cela ne déclenchera pas sur la touche, mais sur la touche de retour enfoncée. Ces accessoires sont introduits si la recherche de recherche de recherche résulte de l'API. Si vous voulez juste la recherche locale (recherche à partir du tableau existant), ces accessoires ne sont pas nécessaires. onSearch sera automatiquement obtenu le paramètre keyword | () => null | Facultatif |
loadNext | fonction | S'il est défini, cette fonction sera appelée lorsque l'utilisateur fait défiler la plaque plate vers le bas. L'USECASE doit appeler la prochaine pagination de votre API. S'il est défini, l'icône de chargement sera affichée en bas de la liste. Pour masquer l'icône de chargement, assurez-vous que cet accessoire n'est pas défini | indéfini | Facultatif |
refreshControlProps | objet | accessoires pour RefreshControl | indéfini | Facultatif |
Si vous avez ref au composant,
const completeFlatList = useRef();
...
<CompleteFlatList
...
ref={completeFlatList}
...
/>
ou dans les composants basés
<CompleteFlatList
...
ref={c => this.completeFlatList = c}
...
/>
Vous pouvez utiliser n'importe quelle méthode ci-dessous: completeFlatList.current.methodName()
ou dans les composants basés
this.completeFlatList.methodName()
| Méthode | Description |
|---|---|
| recherche claire | Effacer les entrées de recherche par programmation |
