본문 바로가기

내마음대로만들어보자/Expo22

[앱화면만들기] <Button> <Image> 1. import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, } from "react-native"; export default function App() { return ( 아래 버튼을 눌러주세요. Alert.alert("팝업!!!")} /> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", }, textContainer: { height: 100, margin: 10, paddingTop: 50, }, textStyle.. 2021. 8. 18.
[앱화면만들기] <View> , <Text>, <ScrollView> 1. View 화면의 영역(레이아웃)을 잡아주는 엘리먼트. 해당 엘리먼트를 통해 화면분할하는 예제를 해보자. import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, subContainerOne: { flex:1, backgroundColor:"yellow" }, subContainerTwo: { flex:.. 2021. 8. 16.
JSX 기본문법 JSX문법을 공부하기에 앞서, App.js 에 대해 간단히 알아보면 "앱의 화면을 그려주는 커다한 함수" 이며, 자세히는 리액트 네이티브 라이브러리 또는 expo에서 제공해주는 기능들을 사용하여 화면을 그려준다. * App.js 기본형태 //앞으로 사용할 리액트, 리액트 네이티브, 엑스포 라이브러리에서 꺼내서 사용할 기능들을 아래와같이 선언해준다. import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; // App.js는 App함수를 내보내기 하고 있는 자바스크립트 파일이며, 앱 화면을 반환하고 있다. export default fun.. 2021. 8. 16.
리액트 네이비트 & EXPO 앱개발 준비 1. 리액트 네이티브(React Native)란? 자바스크립트를 통해 안드로이드,IOS앱을 만들어 주는 라이브러리다. 또한 안드로이드,IOS앱을 개발하려면 자바&코틀린, Swift 등을 배워야하지만 하나의 언어로 앱을 개발할 수 있도록 도와주는 도구! 2. EXPO란? 가장 큰 장점은 개발중인 앱을 모바일 화면으로 테스트하면서 개발이 가능하다는 점이다! 또, 안드로이드,IOS 코드를 직접 건드리지않아도 앱 개발이 가능하도록 도와준다. * EXPO 다운로드 앱 링크 https://apps.apple.com/app/apple-store/id982107779 ‎Expo Go ‎Start building projects using web technologies with just your iOS device an.. 2021. 8. 16.

티스토리툴바