Il est possible de construire un tableau d'objets JSX et de les afficher.
import { View, Text } from 'react-native';
export default function App() {
const items = [
<Text>a</Text>,
<Text>b</Text>,
<Text>c</Text>,
]
return (
<View style={{ flexGrow: 1, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
{ items }
</View>
)
}On peut également exploiter les fonctions des tableaux, pour traiter des données et produire un tableau
import { View, Text } from 'react-native';
export default function App() {
const items = ["a", "b", "c"]
return (
<View style={{ flexGrow: 1, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
{
items.map((i, index) => {
return (
<Text
style={{
color: (index % 2 == 0 ? 'red' : 'blue')
}}
>
{ i }
</Text>
)
})
}
</View>
)
}Et extraire dans une fonction
import { View, Text } from 'react-native';
export default function App() {
const items = ["a", "b", "c"]
function list() {
return items.map((i, index) => {
return (
<Text
style={{
color: (index % 2 == 0 ? 'red' : 'blue')
}}
>
{ i }
</Text>
)
})
}
return (
<View style={{ flexGrow: 1, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
{ list() }
</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 { View, Text, ScrollView } from 'react-native';
export default function App() {
// 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' }} horizontal={ false }>
{
Array(999).fill().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.
import { View, Text, FlatList } from 'react-native';
export default function App() {
const numbers = Array(999).fill()
return (
<FlatList
data={ numbers }
renderItem={ () => {
return (
<Text
style={{
backgroundColor: 'lightgray',
padding: 16,
textAlign: 'center'
}}
>
{ '🤓' }
</Text>
)
}}
/>
)
}On peut personnaliser le comportement
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
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(999).fill().map((_, index) => index)
return (
<FlatList
data={ numbers }
renderItem={ (listItem) => <NumberItem value={ listItem.item } /> }
ItemSeparatorComponent={ () => <View style={{ height: 2, backgroundColor: 'black' }}/> }
/>
)
}