React Native3 [RN] React native의 기본형태 import React from 'react';import {SafeAreaView, View, Text, StyleSheet} from 'react-native';const App = () => { return ( react );};const styles = StyleSheet.create({});export default App; 2024. 4. 30. [RN] SafeAreaView의미 SafeAreaView 컴포넌트는 iphone X 이상 기종에서 디스플레이의 보이지 않는 영역 및 최하단 영역에 내용이 보여지는 것을 방지해줍니다. 화면의 전체 영역을 사용할것이다. 따라서 가장 먼저 해야 하는 작업은 App 컴포넌트의 SafeAreaView가 전체영역을 사용하게끔 설정하는 것이다.이 작업은 flex 스타일 속성을 1로 설정하면 된다. flex 스타일 속성을 1로 설정하는 것은 자신이 위치한 곳의 영역을 모두 차지하겠다는 의미이다. 예시import React, {useState} from 'react';import {SafeAreaView, StyleSheet} from 'react-native';import Counter from './components/Counter';const .. 2024. 4. 29. [RN] css적용하기 App.jsimport React from 'react';import {SafeAreaView} from 'react-native';import Box from './components/Box';const App = () => { return ( );};export default App; components/Box.jsimport React from 'react';import {View, StyleSheet} from 'react-native';function Box() { return ;}const styles = StyleSheet.create({ box: { width: 64, height: 64, backgroundColor: 'black', .. 2024. 4. 29. 이전 1 다음