1.TextInput

Text를 입력하는곳 onChangeText를 통해 text가 변경될 때마다 호출한다.

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

const PizzaTranslator = () => {
    const [text, setText] = useState('');
    return (
        <View style=>
            <TextInput
                style=
                placeholder="Type here to translate!"
                onChangeText={text => setText(text)}
                defaultValue={text}
            />
            <Text style=>
                {text.split(' ').map((word) => word && '🍕').join(' ')}
            </Text>
        </View>
    );
}

export default PizzaTranslator;

1. ScrollView

여러 개 components와 views를 담을 수 있다.

import React from 'react';
import { Image, ScrollView, Text } from 'react-native';

const logo = {
    uri: 'https://reactnative.dev/img/tiny_logo.png',
    width: 64,
    height: 64
};

const App = () => (
<ScrollView>
    <Text style=>Scroll me plz</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style=>If you like</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style=>Scrolling down</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style=>What's the best</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style=>Framework around?</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style=>React Native</Text>
</ScrollView>
);

export default App;

1. List Views

3-1. FlatList. 화면에 보여지는것만 render한다.

FlatList component는 두개의 속성을 갖는다. Data와 renderItem. Data는 list의 Data를 의미하고 renderItem은 source로부터 하나의 아이템을 가져와 formatted된 component를 render할 수 있게 return시킨다.

3-2 SectionList. iOS의 UITableView와 유사하며 data set을 logical sections으로 구분하고 싶다면 headers 이용하여 render한다.

출처

https://reactnative.dev/docs/handling-text-input