App2.js 1.09 KB
Newer Older
YoonDongMin's avatar
YoonDongMin committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import React, {useState} from 'react' ;
import {StyleSheet, Text, View, ScrollView} from 'react-native';
//ScrollView를 해야 밑에 내릴 수 있음
export default function App() {
    const [people, setPeople] = useState([
        { name : 'shaun', key: '1'},
        { name : 'yoshi', key: '2'},
        { name : 'shaun', key: '3'},
        { name : 'shaun', key: '4'},
        { name : 'shaun', key: '5'},
        { name : 'shaun', key: '6'},
        { name : 'shaun', key: '7'},
    ]);

return (
    <View style = {styles.container}>

    <ScrollView>
    {people.map((item) => {
        return (
            <View key = {item.key}> 
                <Text style = {styles.item}>{item.name}</Text>
            </View>
        )
    })}
    </ScrollView>
    </View>
    ); //key를 나타내어주어야 error가 안뜸 
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        paddingTop: 40,
        paddingHorizontal: 20 
    },
    item: {
        marginTop: 24,
        padding:30,
        backgroundColor: 'pink',
        fontSize: 24
    }
});