Frontend (28) 썸네일형 리스트형 [M1 & ReactNative] rbenv install error rbenv install 3.1.3 에서는 이런 에러가 났는데 OPENSSL_CFLAGS=-Wno-error=implicit-function-declaration RUBY_CONFIGURE_OPTS=--with-readline-dir="$(brew --prefix readline)" rbenv install 3.1.3 https://stackoverflow.com/questions/70698565/why-do-i-get-the-error-the-ruby-openssl-extension-was-not-compiled-error-ruby Why do I get the error 'The Ruby openssl extension was not compiled ERROR: Ruby install aborted .. [ReactNative] Modal Modal : 화면 가장 위에 표시될 레이어 광고를 띄워 뒤로 돌아가지 못하게하기 , 오류가 났을때 경고창을 띄워 작업을 일시 중단시키기 등등에 사용된다 modal.js를 일단 생성합니다. 그 후 App.js에 modal.js를 임포트 해줍니다. 여기까지는 항상하던거니까 생략! modal IMPORT import { Modal} from 'react-native'; 마찬가지로 modal을 import해줍니다. Modal tag Modal Tag 를 사용하여 내부에 텍스트를 넣어두고 테스트해봅시다. 모달에는 거의 필수적인 property가 있는데 바로 visible입니다 여기에 해당하는 값이 true일 때만 modal이 띄워집니다. 일단 true로 설정하고 해보겠습니다. class ModalComponen.. [ReactNative] Image넣기 ReactNative에서 이미지를 넣는 방법에는 두가지가 있습니다. 로컬에서 이미지를 넣는 방법 서버에서 이미지를 가져오는 방법 로컬에서 이미지 넣기 이미지 저장 프로젝트 폴더내에 assets이라는 폴더를 만들고 그 내에 image라는 폴더를 만들어 원하는 이미지를 해당 폴더에 넣어줍니다. 저는 십덕이니까는 슈퍼맨을 넣어줬어요 제가 정말 좋아하는 슈퍼맨 사진입니다 보기만해도 희망과 뽕이 차오릅니다. Image IMPORT import {Image} from 'react-native'; 사용을 위해서 이미지 클래스를 임포트해줍니다. 이미지 태그 삽입 단순하게 이미지를 넣기위해서는 이미지 태그와 source를 이용하여 이미지를 넣어줍니다. 방법1) source={require('경로')} render() {.. [React-Native] Picker(Selector) / Slider / Loading창 Picker & Slider & Loading창(Activity Indicator) 를 구현합니다. 이게 Picker 이게 슬라이더 Picker Picker Install picker를 사용하기 위해서는 install이 필요합니다. ( picker 는 react-native module이 아님) 그때 그때 업데이트를 해서 달라질 수 있으니 공식문서 확인이 필요합니다. https://github.com/react-native-picker/picker react-native-picker/picker Picker is a cross-platform UI component for selecting an item from a list of options. - react-native-picker/picker git.. [React-Native] 기능연습01(TextInput, Button, ScrollView) TextInput , Button, Scrollview 등을 모두 이용하여, 텍스트를 입력하고 버튼을 누르면 앱 화면상에 있는 컨탠츠가 스크롤에 추가되는 내용 1. "Add Text"버튼 만들기 App.js에 일단 alert를 띄우는 기능을 하는 버튼을 만듭니다. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} from 'react'; import {Button, View, StyleSheet, ScrollView} from 'react-native'; class App extends Component { onAd.. [React-Native] 텍스트입력 받기(TextInput) 로그인, 회원가입등등 여러곳에서 사용되는 사용자로부터 input Text받아오는 법을 알아보도록 하겠습니다. 새로운 프로젝트 react_native_03을 만들었습니다. 초기설정 진행하기 전에 초기화면을 설정합니다. input을 받는 것을 따로 관리해주기 위해 input.js페이지를 만듭니다. App.js에 임포트하고 다음과 같이 변경해줍니다. App.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} from 'react'; import {View, Text, StyleSheet} from 'react-nati.. [React-Native] 스크롤 기능 화면 스크롤 기능을 구현해보도록 합시다. 저번강의 코드를 가져와서 사용했습니다. 2021.05.31 - [WEB_APP/React-Native] - [React-Native]Touch event, Button [React-Native]Touch event, Button 개발환경 시작하기 이제 개발환경 시작하기는 생략하도록 하겠습니다 react_native_01이라는 새로운 프로젝트를 생성하여 진행하였습니다. react-native init react_native_02 에뮬레이터까지 틀어주도록 합 iagreebut.tistory.com 먼저 스크롤 기능을 사용해보기 위해 Add Number버튼을 많이 눌러 숫자를 늘려보았습니다. ScrollView 모두에게 익숙한 스크롤 기능을 구현해보도록 합니다. Scr.. [React-Native]Touch event, Button 개발환경 시작하기 이제 개발환경 시작하기는 생략하도록 하겠습니다 react_native_01이라는 새로운 프로젝트를 생성하여 진행하였습니다. react-native init react_native_02 에뮬레이터까지 틀어주도록 합시다 Setup : Component 분리 외부파일에 작성한 것을 import하여 사용하는 방법(현업에서 많이 사용) 별도의 외부파일을 작성하여, App.js에 불러와 하나의 컴포넌트처럼 사용해보자. (코드가 간결해지고 유지보수가 쉬워짐!) header.js라는 파일을 작성하여, App.js에 불러오는 방식을 사용할 것 src폴더를 만들어서 거기에 header.js라는 파일을 하나 만들어 줍니다. header.js /** * Sample React Native App * http.. 이전 1 2 3 4 다음
