4. [RN] 스타일 꾸미기

이번 포스팅에서는 스타일을 꾸며보도록 하겠습니다.

저번 포스팅에서 hello world를 띄우기 완료했다면, 그 소스를 그대로 가지고와서 style 설정을 진행해줍니다.

코드는 web이랑 크게 다른 것 같지 않습니다,.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React,{Component} from 'react';
import { View,Text, StyleSheet } from 'react-native';

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

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App;

flex : 하나의 폰 안에서 비율을 구하는 것입니다.

칸을 나눠주는 것이라고 생각하면 될듯.

화면에 스타일이 잘 적용된 것을 볼 수 있습니다,

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React,{Component} from 'react';
import { View,Text, StyleSheet } from 'react-native';

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

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center'
  },
  subView: {
    flex: 1,
    backgroundColor: 'yellow',
    marginBottom: 10
  },
  anotherView: {
    flex: 2,
    backgroundColor: 'yellow',
    marginBottom: 10 ,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  },
  mainText:{
    fontSize: 20,
    fontWeight: 'bold',
    color: 'red',
    padding: 20
  }
})

export default App;

ㄴ이것저것 만져서 더 멋진 앱을 구상해볼 수 있습니다.

더 멋진앱!

 

 

끝.