728x90 반응형 리액트네이티브38 [react-native] EXPO로 시작해보기 6 - 조건에 따라 다른 화면 보여주기 로딩이 되었는지 안되었는지를 나타내는 값을 하나 만든다 isLoaded isLoaded 의 값을 false로 지정한다. state= { isLoaded : false } isLoaded 가 true 이면 NewPage 를 보여주고, false 이면 로딩중 텍스트를 가진 View를 보여준다. 삼항연산자를 이용한다. 조건 ? 참일경우 : 거짓일 경우 NewPage.js를 import 해서 사용한다. import NewPage from './NewPage' {isLoaded ? : ( 로딩중 )} isLoaded의 값을 바꿔주는건 특정 조건에서 setState를 이용해 값을 변경해 주면 된다. this.setState({ isLoaded: true }); 전체 코드 App.js import React, {Co.. 2019. 7. 30. [react-native] EXPO로 시작해보기 5 - 태그 추가해 보기 <LinearGradient><Ionicons><StatusBar> LinearGradient 배경에 그라디언트 효과를 주는 컴포넌트 2가지 이상의 색상으로 그라디언트 효과를 나타낼 수 있다. import { LinearGradient } from 'expo'; https://docs.expo.io/versions/v33.0.0/sdk/linear-gradient/ 상태바를 표시하는 StatusBar light-content(왼쪽) 와 dark-content(오른쪽) 로 bar 의 스타일을 선택할 수 있다. expo의 아이콘을 사용하는 import { Ionicons } from '@expo/vector-icons'; Ionicons의 경우 color, size, name이 필요하다 https://expo.github.io/vector-icons/ 이때 아이콘에 따라 i.. 2019. 7. 30. [react-native] EXPO로 시작해보기 4 - 태그 추가해 보기 <SafeAreaView><TextInput> 처음에 진행하다보니 상태바(statusbar)영역과 겹쳐지는 문제가 발생했다.. 그래서 찾다보니 SafeAreaView 태그를 이용해 영역을 제한할 수 있었다. SafeAreaView 가 아닌 View 만을 사용해 영역을 줄 경우 왼쪽과 같고 SafeAreaView를 사용하면 오른쪽과 같다 +)) 알고보니 SafeAreaView는 ios 11이후로 적용된다.. 안드로이드는 아애 적용되지 않는다...... [리액트네이티브] - [react-native] 시작해보기 10 - 각 상태표시줄 높이 구하기 https://docs.expo.io/versions/v33.0.0/react-native/statusbar/ https://docs.expo.io/versions/v33.0.0/react-native/safe.. 2019. 7. 29. [react-native] EXPO로 시작해보기 3 - 태그 추가해 보기 <Button> <Image> 정적인 이미지 추가 태그를 이용해 style을 적용하고, source 의 속성에 uri 값에 정적인 이미지 경로를 넣어준다. 외부 링크라면 uri를 assets에 있는 이미지 파일을 가져온다면 require를 사용한다. https://docs.expo.io/versions/v33.0.0/react-native/images/ Images - Expo Documentation React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree a.. 2019. 7. 29. 이전 1 ··· 6 7 8 9 10 다음 728x90 반응형
