Component (The Basics)

App.js에 코드를 작성하면 실제 디바이스 화면을 나타낼 수 있다.

App.js는 크게 import문, body문, body문을 꾸미는 styles로 구성된다.

 

리액트 네이티브에서는 웹에서 많이 사용하는 HTML 태그 대신에 리액트 네이티브에서 정한 태그(컴포넌트)만 사용할 수 있다. 이러한 리액트 네이티브의 컴포넌트는 App.js의 body문에 작성한다. 또한, 컴포넌트는 import문에서 가져온다음 사용되기도 한다.

 

View

리액트 네이티브의 컴포넌트 중에서 가장 근본이 되는 것은 View 이다.

View는 전체적인 레이아웃을 잡아주는 역할을 한다. 웹에서는 div와 가장 유사하게 사용된다.

중첩이 가능하다.

아래와 같이 사용한다. View는 다른 컴포넌트들을 감싸준다.

 

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

const HelloWorldApp = () => {
  return (
    <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

export default HelloWorldApp;

 

위 코드에 따른 결과창

 

 

 

Text

Text는 텍스트를 표현하기 위한 컴포넌트다. 리액트 네이티브에서 기본적으로 제공하는 컴포넌트에서는 Text와 TextInput으로만 텍스트를 쓸 수 있기 때문에 필수적으로 사용된다.

다만, 내부에 사용할 수 있는 컴포넌트는 제한적이고 스타일 제약을 받을 수 있다.

아래 코드에서는 Text를 이용해서 Hello, world!를 출력해주었다.

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

const HelloWorldApp = () => {
  return (
    <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

export default HelloWorldApp;

 

 

StyleSheet

StyleSheet를 이용해서 body문을 꾸밀 수 있다.

아래 코드와 같이 StyleSheet를 import문에서 가져와 사용한다.

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

const LotsOfStyles = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

위 코드의 실행 결과 창

 

Image

Image를 이용해서 화면에 사진을 띄울 수 있다.

아래와 같이 사용하며, require 안에 경로를 적어서 원하는 사진을 화면에 나타낸다.

<Image source={require('./my-icon.png')} />

 

Touchable

리액트 네이티브에서는 View나 Text에도 터치 핸들링을 할 수 있다. 또한 button 역할의 컴포넌트가 다양하게 존재한다.

• Button : 가장 기본적인 Button 컴포넌트. Android와 iOS에서 다르게 보일 수 있다.

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

 

• TouchableHightlight : View가 Touch될 때 오버레이를 추가하여 사용자에게 시각적인 효과를 부여.

    render() {
        return (
            <View style={styles.container}>
                <View style = {styles.container2}>
                    {itemViews}
                </View>
                <View style = {styles.container3}>
                    <TouchableHighlight
                        onPress={()=>this.notifySomething()}
                        underlayColor={'#00000000'}
                        >
                        <View >
                            <Image style={styles.image1}
                                    source={require('../assets/images/miami.jpg')}>
                            </Image>
                        </View>
                    </TouchableHighlight>

                    <Text style={styles.text}>
                        {this.state.number}
                    </Text>
                </View>
            </View>

        );
    }

 

• TouchableOpacity : View가 Touch에 반응하도록 하는 컴포넌트. activeOpacity를 사용해서 버튼을 눌렀을 때 반짝이는 정도를 달리할 수 있다.

render() {
    return (
      <SafeAreaView style={styles.container}>
        <TouchableOpacity
          onPress={()=>{}}
          activeOpacity={0.3}
          style={styles.button}
      >
          <Image style={styles.icon} source={require('~/assets/images/icon_coin.png')} />
          <Text style={styles.buttonText}>100코인 획득</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }

 

• TouchableNativeFeedback : 사용자가 정의한 피드백을 나타낼 수 있으며 단일 View 컴포넌트만 자식 요소로 사용가능. Android에서만 사용가능하다.

import React, { useState } from "react";
import { Text, View, StyleSheet, TouchableNativeFeedback, StatusBar } from "react-native";

const App = () => {
  const [rippleColor, setRippleColor] = useState(randomHexColor());
  const [rippleOverflow, setRippleOverflow] = useState(false);
  return (
    <View style={styles.container}>
      <TouchableNativeFeedback
        onPress={() => {
          setRippleColor(randomHexColor());
          setRippleOverflow(!rippleOverflow);
        }}
        background={TouchableNativeFeedback.Ripple(rippleColor, rippleOverflow)}
      >
        <View style={styles.touchable}>
          <Text style={styles.text}>TouchableNativeFeedback</Text>
        </View>
      </TouchableNativeFeedback>
    </View>
  );
};

const randomHexColor = () => {
  return "#000000".replace(/0/g, function() {
    return (~~(Math.random() * 16)).toString(16);
  });
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: StatusBar.currentHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  touchable: { flex: 0.5, borderColor: "black", borderWidth: 1 },
  text: { alignSelf: "center" }
});

export default App;

 

 

참조

 

• https://reactnative.dev/docs    
• WIT블로그 https://wit.nts-corp.com/2020/03/23/6014
• k____tae log   https://velog.io/@kkt219a/React-Native-Touch-event%EC%99%80-%EB%8B%A4%EC%96%91%ED%95%9C-%ED%99%9C%EC%9A%A9-%EC%98%88%EC%A0%9C
• Que Sera Sera https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=ga5336&logNo=222021793296