Menu
React Native – ScrollView
import React, { Component } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, ScrollView } from 'react-native'
export default class App extends Component {
state = {
color: [
{
id: 0,
name: 'Red',
},
{
id: 1,
name: 'Green',
},
{
id: 2,
name: 'Yellow',
},
{
id: 3,
name: 'Blue',
},
{
id: 4,
name: 'Orange',
},
{
id: 5,
name: 'Pink',
}
]
}
render() {
return (
<View>
<ScrollView>
{
this.state.color.map((item) => (
<TouchableOpacity
key = {item.id}
style = {styles.container}>
<Text style = {styles.text}>
{item.name}
</Text>
</TouchableOpacity>
))
}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create ({
container: {
padding: 50,
marginTop: 3,
backgroundColor: '#F9E79F',
alignItems: 'center',
},
text: {
color: '#BA4A00',
fontSize:30
}
})
Output
