[react-native] EXPO로 시작해보기 6 - 조건에 따라 다른 화면 보여주기

로딩이 되었는지 안되었는지를 나타내는 값을 하나 만든다 isLoaded

 

isLoaded 의 값을 false로 지정한다. 

state= {
   isLoaded : false
}

 

 

 

isLoaded 가 true 이면 NewPage 를 보여주고, false 이면 로딩중 텍스트를 가진 View를 보여준다. 

 

삼항연산자를 이용한다. 

조건 ? 참일경우 : 거짓일 경우 

 

NewPage.js를 import 해서 사용한다. 

 

 

import NewPage from './NewPage'

<View style={styles.container}>
        {isLoaded ? <NewPage /> : (<View style={styles.loading}>
          <Text style={styles.loadingText}>로딩중 </Text>
        </View>)}
      </View>

 

 

 

isLoaded의 값을 바꿔주는건 특정 조건에서 setState를 이용해 값을 변경해 주면 된다. 

this.setState({
	isLoaded: true
});

 

전체 코드

 

App.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, ScrollView, TextInput, SafeAreaView } from 'react-native';
import NewPage from './NewPage'

export default class App extends Component {
  state= {
    isLoaded : false
  }
   componentDidMount(){
   //컴포넌트가 마운트 되었을 때 
   // 위치정보를 가져와 위치정보가 있으면 isLoaded 를 true로 변경한다 
      navigator.geolocation.getCurrentPosition(
      position => {
      this.setState({
        isLoaded: true
      });
      },
      error => {
        console.log(error);
      }
    );
  }
  render(){
    const { isLoaded } = this.state;
    return (
      <View style={styles.container}>
        {isLoaded ? <NewPage /> : (<View style={styles.loading}>
          <Text style={styles.loadingText}>로딩중 </Text>
        </View>)}
      </View>
      
    )
  }
}