본문 바로가기

RN/RN cli4

navigation - 화면 이동하기( home-login) 📍구현할 앱 구조 홈 화면 -> 로그인 버튼-> 클릭시 로그인 화면 📍스크린들 만들기 ☑️src/screens/Home.js import React from 'react'; import { Button } from 'react-native'; import styled from 'styled-components/native'; const Container = styled.View` justify-content: center; align-items: center; margin-top:50%; `; const LogoContainer = styled.View` margin-bottom:10px; `; const StyledText = styled.Text` font-size: 30px; `; const But.. 2024. 1. 17.
React Navigation(네비게이션 라이브러리) , Stack 📍React Navigation - 화면 간의 전환 관리 가능 📍설치 npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context /ios 추가 설치 필요 npx pod-install ios android) android/app/src/main/MainActivity.java public class MainActivity extends ReactActivity { // ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(null); } // ... } import android.os.Bundl.. 2024. 1. 12.
로그인 화면 components/Login (파일 이름은소문자 가능) (컴포넌트 이름은 첫글자 대문자) import React, { useState } from 'react'; import { View, TextInput, TouchableOpacity, Text, StyleSheet, Dimensions } from 'react-native'; const LoginScreen = () => { // 컴포넌트 생성 const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleLogin = () => { // 로그인 버튼이 클릭되었을 때 처리할 로직을 작성하세요. // 여기서는 간단히 입력된 아.. 2024. 1. 10.
React-Native cli (mac) 실행 방법 📍expo cli - js만으로도 앱이 작성 가능 - 앱의 빌드 크기가 큼 📍react-native cli - react-native 만 설치되어 있음 - 원하는 네이티브 모듈 작성 가능 - 실제 개발엔 이거 이용한다고 생각! 📍설치 1) homebrew, wathman(expo cil 참고),cocoapods 설치 2) ruby 설치 % arch -arm64 brew install ruby % arch -arm64 brew install ruby-build % arch -arm64 brew install rbenv 3) jdk 설치 https://0and.tistory.com/1924) Mac에서 Java JDK 설치하기 MacBook에서 JDK를 업데이트하는 김에 JDK 설치하는 방법을 포스팅한다. .. 2024. 1. 8.