728x90 반응형 리액트네이티브38 [react-native] EXPO로 시작해보기 10 - 각 상태표시줄 높이 구하기 로 편하게 설정할 수 있을 줄 알았는데 IOS 최신버전에서만 적용되고 있다.. 그래서 각각의 높이 만큼 패딩이나 마진을 주어 상태표시줄과 겹치지 않게 해주어야하는데 디바이스마다 다 다른 높이를 가지고 있어 각각의 높이를 구해주어야한다. 설치 >> npm install --save react-native-status-bar-height .js 파일에 import 후 로그로 찍어서 확인해 본다. import { getStatusBarHeight } from 'react-native-status-bar-height'; . . . console.log(getStatusBarHeight()); 현재 그냥 paddingTop:50 으로 설정되었을때 화면별로 적용되는 모양이 다르다 Xr 에서는 탈모상태바 덕에 적당히.. 2019. 8. 6. [react-native] EXPO로 시작해보기 9 - 태그 추가해보기 (Modal) [리액트네이티브] - [react-native] 시작해보기 3 - 태그 추가해 보기 [리액트네이티브] - [react-native] 시작해보기 4 - 태그 추가해 보기 [리액트네이티브] - [react-native] 시작해보기 5 - 태그 추가해 보기 export default class ExampleView extends Component { state ={ modalVisible: false, //모달이 보일지 말지를 결정 } setModal(visible) { this.setState({ modalVisible : visible }); } render() { const openModal = () =>{ this.setModal(true) } const closeModal = () => { this... 2019. 8. 5. [react-native] EXPO로 시작해보기 8 - 리액트 라이프사이클 리액트가 render 되는 함수 순서 ( 라이프 사이클 ) componentWillMount(){ //컴포넌트가 존재한다면 제일먼저 호출 //보통 API 호출하는 위치 } render(){ //componentWillMount 다음으로 호출 //컴포넌트가 화면에 배치됨 } componentDidMount(){ //render 다음으로 호출 //성공적으로 리액트에 컴포넌트가 전달되면 실행됨 } 업데이트 라이프사이클 componentWillReceiveProps(){ //새로운 props 를받음 } shouleComponentUpdate(){ //새로운 props 이전과 다르면 호출 } componentWillUpdate(){ //컴포턴트가 업데이트됨 //로딩중 아이콘이 뜨는 시점 } render(){ //.. 2019. 8. 2. [react-native] EXPO로 시작해보기 7 - 다른화면으로 넘어가면서 값 전달하기 간단하게 조건에 따라 다른화면으로 전환하는 것은 아래글과 같다 [프레임워크/리액트네이티브] - [react-native] 시작해보기 6 - 조건에 따라 다른 화면 보여주기 그럼 조건에 따라 화면 전환이 일어날때 값을 전달하려면 어떻게 해야할까 처음에 현재 위치를 가져오고, 현재위치가 있다면 날씨 API 를 이용해 해당 위치의 날씨를 가져와 화면이 전환되고 날씨에 대한 내용을 출력해 주도록 만들어본 것이다. App.js import React, {Component} from 'react'; import { StyleSheet, Text, View, ScrollView, TextInput, SafeAreaView } from 'react-native'; //전환될 화면 import import NewPage.. 2019. 7. 30. 이전 1 ··· 5 6 7 8 9 10 다음 728x90 반응형
