Il est possible de construire un tableau d'objets JSX et de les afficher.
const items = [
<Text>A</Text>,
<Text>B</Text>,
<Text>C</Text>,
]
// ...
return (
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
{ items }
</View>
)On peut également exploiter les fonctions des tableaux, pour traiter des données et produire un tableau
const items = ["a", "b", "c"]
// ...
return (
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
{
items.map((i, index) => {
return (
<Text
style={{
color: (index % 2 == 0 ? 'red' : 'blue')
}}
>
{ i }
</Text>
)
})
}
</View>
)Attention
return (
<View style={{ flexDirection: 'row', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
{
[...Array(99)].map(() => {
return (
<Text
style={{
backgroundColor: 'lightgray',
padding: 16
}}
>
{ '🤓' }
</Text>
)
})
}
</View>
)Each child in a list should have a unique "key" prop
Pour permettre à React de synchroniser efficacement l'état et le rendu, chaque item d'une liste doit être identifié par une clé unique via la prop key.
<X key={ ... } />📚 Keeping list items in order with key
La ScrollView permet de faire défiler le contenu s'il se retrouve à l'extérieur des limites de l'affichage.
Pour une petite quantité d'items, car le rendu est calculé pour tous les items en même temps!
import { ScrollView } from 'react-native';
// ATTENTION contentContainerStyle pour controler la mise en page dans la ScrollView
// Tester nowrap et horizontal={ true }
return (
<ScrollView contentContainerStyle={{ flexDirection: 'row', gap: 16, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }} >
{
[...Array(99)].map(() => {
return (
<Text
style={{
backgroundColor: 'lightgray',
padding: 16
}}
>
{ '🤓' }
</Text>
)
})
}
</ScrollView>
)Plusieurs personnalisations disponibles
Il existe 2 mécanismes pour une gestion performante de l'affichage en liste via React Native. Ceux-ci utilisent la virtualisation pour créer un ensemble réduit de cellules à afficher et les réutiliser au cours du défilement.
const numbers = [...Array(99)]
return (
<FlatList
data={ numbers }
renderItem={ () => {
return (
<Text
style={{
backgroundColor: 'lightgray',
padding: 16,
textAlign: 'center'
}}
>
{ '🤓' }
</Text>
)
}}
/>
)On peut personnaliser le comportement
function NumberItem({ value }) {
return (
<TouchableOpacity
onPress={ () => console.log(`${value} pressed!`) }
>
<Text
style={{
padding: 8,
backgroundColor: 'lightgray',
textAlign: 'center',
fontSize: 24
}}
>
{ `${value} 🤓` }
</Text>
</TouchableOpacity>
)
}
export default function App() {
const numbers = [...Array(99)].map((_, index) => index)
return (
<FlatList
data={ numbers }
renderItem={ (listItem) => <NumberItem value={ listItem.item } /> }
ItemSeparatorComponent={ () => <View style={{ height: 2, backgroundColor: 'black' }}/> }
/>
)
}