리액트 네이티브 - 텍스트 출력 및 간단한 기능 구현하깅

언니의 독촉으로 인해!!

리액트 네이티브 개발을 얼렁 시작하기로 결정했습니다... 허허 

 

할 일 너무 많아서 일단 급한 불부터 ... (내가 저지른 일부터 빨리 끝내려구요 ㅎㅎ..)  

 

엑스포가 있다길래 엑스포까지 설정 다 마쳤는데 그냥 깔끔하게 cli 를 사용하기로 결정했어요 

정석이 짱이라고 생각합니다... ! 

 

설정이 꼬여서 다시 설정 맞추는 데 시간이 좀 걸렸네요 ㅎㅎ.

리네를 하나도 모르기 때문에 텍스트 출력부터 시작했어욤 

 

일단 버전부터 작성해본다면 

Node : 23.5.0 
Watchman : 2024.12.02
Java : "17.0.11"
Pad : 1.16.2
Android api: 35
Android sdk platform 35 

 

MyApp 이동 후에 npm run ios / npm run android 로 시작이 가능합니다 

 

 

Hello ! 를 출력하는 걸 보실 수 있습니당.  

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

const App = () => {
    return <View>
        <Text style={{fontSize:20}}>Hello!</Text>
    </View>;
}

export default  App;

 

 

 

이번에는 텍스트를 누르면 텍스트가 바뀌는 것을 만들어볼게옹 

 

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

const App = () => {
    const [line, setLine] = useState('click!');
    const press = () => {
        return  setLine('사사삭!');
    };
    return <View>
        <Text style={{fontSize:20}} onPress={press}>
            {line}
        </Text>
    </View>;
}

export default  App;

 

 

참고 블로그입니당 

 

https://velog.io/@narinn-star/React-Native-Text-%EC%9A%94%EC%86%8C

[React-Native] Text 요소