React Native - ListView
In questo capitolo, ti mostreremo come creare un elenco in React Native. ImporteremoList nel nostro Home componente e mostrarlo sullo schermo.
App.js
import React from 'react'
import List from './List.js'
const App = () => {
return (
<List />
)
}
export default App
Per creare un elenco, useremo il map()metodo. Questo itererà su una serie di elementi e renderà ciascuno di essi.
List.js
import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
class List extends Component {
state = {
names: [
{
id: 0,
name: 'Ben',
},
{
id: 1,
name: 'Susan',
},
{
id: 2,
name: 'Robert',
},
{
id: 3,
name: 'Mary',
}
]
}
alertItemName = (item) => {
alert(item.name)
}
render() {
return (
<View>
{
this.state.names.map((item, index) => (
<TouchableOpacity
key = {item.id}
style = {styles.container}
onPress = {() => this.alertItemName(item)}>
<Text style = {styles.text}>
{item.name}
</Text>
</TouchableOpacity>
))
}
</View>
)
}
}
export default List
const styles = StyleSheet.create ({
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#d9f9b1',
alignItems: 'center',
},
text: {
color: '#4f603c'
}
})
Quando eseguiamo l'app, vedremo l'elenco dei nomi.
È possibile fare clic su ogni elemento nell'elenco per attivare un avviso con il nome.