view 태그, text 태그 사용

리액트 네이티브의 app.js 파일 속 내용들이 화면의 출력 화면이 된다.

import React, {Component} from 'react';  //리액트라는 모튤에서 컴포넌트라는 클래스 import함
import { View, Text} from 'react-native'; 

class App extends Component{ //컴포넌트를 상속받은 App이라는 클래스
  render(){
    return(
      <View>   //화면에 출력하려면 view라는 태그에 감싸져있어야한다 
        <Text>hello world</Text>
      </View>
    )
  }
}

export default App;

위는 app.js에 view태그와 text태그를 사용해서 앱 화면에 hello world를 출력하게 했다.

style

view태그와 text태그에 글자의 색이나 여러 style을 줄 수 있다.
태그에 style은 크게 두 가지로 줄 수 있다.
1.태그 내부에 style 주기
2.태그 외부에 style 주기

태그 내부에 style 주기

<View style={{
        backgroundColor: 'green', 
        height: '100%',  //위의 margin 50빼고 나머지 영역 꽉채움 
        marginTop: 50  //50은 실제 쓰는 폰의 고유 단위임
      }}>

margin은 view가 다른 컴포넌트와의 간격을 띄울때 사용되고
padding은 view 내부의 다른 컴포넌트와의 간격을 띄울때 사용된다.

태그 외부에 style 주기

class App extends Component{
  render(){
    return(
      <View style={styles.mainView}>
        <View>
          <Text>hello world</Text>
        </View>        
      </View>
    )
  }
}


const styles = StyleSheet.create({ //stylesheet를 import하고 create라는 메소드 사용
  mainView: {
    flex:1,   //flex는 화면을 채우는 컴포넌트들간에 차지하는 영역의 비율을 나타내는 지표 
    backgroundColor: 'green', 
    paddingTop: 50,
    alignItems:'center',  //수평정렬
    justifyContent:'center'  //수직정렬
  }
})

export default App;