Dev갱이 Dev갱이

(1) 헤더 컴포넌트를 만들어서 추가. //Header.jsx import React from 'react' import { View, Text, StyleSheet } from 'react-native'; export default function header() { return ( TodoApp ) } const styles = StyleSheet.create({ header: { backgroundColor: '#28324a', height:80, paddingTop:28, textAlign:'center', }, header__title:{ color:'#ffffff', textAlign:'center', fontSize:20, fontWeight:'bold' } }); import Header ..

(1) Touchable 공식문서 읽어보기. https://reactnative.dev/docs/touchableopacity TouchableOpacity · React Native If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. reactnative.dev Button컴포넌트보다 TouchableOpacity를 사용하는걸 지향하는듯. [TouchableOpacity] 버튼을 눌렸을 때에 피드백을 주는 버튼입니다. 단순히 텍스트 문자열을 렌더링하는 것이 목표인 경우에는 Button 요소를 선택하는 것이 좋습니다. 그러나 양식화된 버튼을 만들 ..

(1) FlatList 공식 문서 한번 읽어보기. https://reactnative.dev/docs/flatlist FlatList · React Native A performant interface for rendering basic, flat lists, supporting the most handy features: reactnative.dev FlatList는 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 쓰이는 리액트네이티브 컴포넌트이다. JS에서의 map 함수 역할과 비슷하나 더 많은 기능을 내포하고 있어 react-native에서 많이 쓰이는 컴포넌트이다. ScrollView와 비교 RN에서 많은 양의 데이터를 출력 할 때 와 함께 주로 사용되는데 사용용도에 차이점이 조금 있..

(1) List - map함수를 사용해서 데이터 뿌려주기 //App.js import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { StyleSheet, Text, View, Button, TextInput } from 'react-native'; export default function App() { const [people, setPeople ] = useState([ {name: "susan", key:'1' }, {name: "yoshi", key:'2' }, {name: "mario", key:'3' }, {name: "luigi", key:'4' }, {name: "peach", k..

(1) TextInput에 대한 공식문서 읽고 https://reactnative.dev/docs/textinput TextInput · React Native A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. reactnative.dev (2) TextInput 추가하기 //App.js import { StyleSheet..

(1) //App.js에서 import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( Body Text details Body Text details ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', } }); 다시 초기 상태에서 import { useS..

//App.js import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( Hellow,World Body Text details Body Text details Body Text details Body Text details ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }..

https://reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev rn공식 사이트와 https://docs.expo.dev/ Introduction to Expo - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev..