리액트 네이티브 - button 컴포넌트

컴포넌트 : 재사용 가능한 조립블록, 화면에 나타나는 UI 요소

App.js도 App이라는 컴포넌트이다.

부모로부터 받은 속성이나 자신의 상태에 따라 표현이 달라지고 다양한 기능 수행

 

 

내장 컴포넌트 => App.js의 View나 Text 컴포넌트가 대표적인 내장 컴포넌트

https://reactnative.dev/docs/compnents-and-apis

 

 

Button 컴포넌트

https://reactnative.dev/docs/button

 

./src/App.js

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

const App = () => {
    return (
        <View
        //style 정의
            style={{
                flex: 1,
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            //출력될 text
            <Text style={{ fontSize: 30, marginBottom: 10 }}>Button Component</Text>
            //버튼에 출력될 text는 title 속성이용, 클릭시 click이 뜨도록 onPress 속성에 함수 지정
            <Button title="Button" onPress={() => alert('Click !!!')} />
        </View>
    );
};

export default App;

 

 

./App.js

import { StatusBar } from 'expo-status-bar';

import App from './src/App'; //./src/App 컴포넌트 사용

export default App;

(button 컴포넌트의 color 속성은 ios에서 텍스트 색을 나타내는 값, 안드로이드에서는 버튼의 바탕색을 나타내는 값)

 

 

 

 

커스텀 컴포넌트

TouchableOpacity 컴포넌트와 Text컴포넌트를 이용해서 MyButton 컴포넌트 생성

(리액트 네이티브 0.63버전에서 Pressable 컴포넌트가 TouchableOpacity컴포넌트를 대체함)

 

 

- ./src에 컴포넌트를 관리할 components 폴더 생성

- MyButton.js 생성

//리액트를 불러와서 사용할 수 있게 해줌(JSX는 React.createElement를 호출 하는 코드로 컴파일 되므로 반드시 작성)
import React from 'react';
//리액트 네이티브에서 제공되는 Pressable, Text 컴포넌트 추가
import{TouchableOpacity, Text} from 'react-native';

//Pressable 컴포넌틀르 사용해서 클릭에 대해 상호작용 할 수 있도록함.
//버튼에 내용표시하기위해 text컴포넌트 사용
const MyButton = () => {
    return (
        <TouchableOpacity>
            <Text style={{fontSize: 24}}>My Button</Text>
        </TouchableOpacity>
    );
};

export default MyButton;

- ./App.js 수정

import React from 'react';
import {Text, View} from 'react-native';
import MyButton from './components/MyButton';

const App = () => {
    return (
        <View
            style={{
                flex: 1,
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >        
            <Text
                style={{
                    fontSize: 30,
                    marginBottom: 10,
                }}
            >
                My Button Component
            </Text>
            <MyButton />
        </View>
    );
};

export default App;

 

MyButton이 생성된다.

 

TouchableOpacity컴포넌트는 onPress 속성을 제공하는 TouchableWithoutFeedback 컴포넌트를 상속 받았기 때문에 onPress 속성을 지정하고 사용할 수 있음

//리액트를 불러와서 사용할 수 있게 해줌(JSX는 React.createElement를 호출 하는 코드로 컴파일 되므로 반드시 작성)
import React from 'react';
//리액트 네이티브에서 제공되는 Pressable, Text 컴포넌트 추가
import{TouchableOpacity, Text} from 'react-native';

//Pressable 컴포넌틀르 사용해서 클릭에 대해 상호작용 할 수 있도록함.
//버튼에 내용표시하기위해 text컴포넌트 사용
const MyButton = () => {
    return (
        <TouchableOpacity
            style={{
                backgroundColor: '#3498db',
                padding: 16,
                margin: 10,
                borderRaduis: 8,
            }}
            onPress={() => alert('click')}
        >
            <Text style={{color: 'white', fotSize: 24}}>My Button</Text>
        </TouchableOpacity>
    );
};

export default MyButton;