1. 리액트 네이티브 레이아웃 with Flexbox (react native layout with flexbox)

https://youtu.be/Qb2a1uFSMvY

 

 

- flexbox로 디자인을 짤수있다

 

- 웹에서 배웠으면 이미 유용

 

-

import React from 'react';

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

export default class App extends React.Component {

render() {

return (

<View style={styles.container}>

<View style={styles.redView} />

<View style={styles.yellowView} />

</View>

);

}

}

// 오브젝트 만들어서 위에 뷰에 붙임

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

// alignItems: 'center',

// justifyContent: 'center',

},

redView:{

flex: 1, // 비율

backgroundColor:'red'

},

yellowView:{

flex: 1, //비율

backgroundColor:'yellow'

}

});

 

 

-alt + 마우스 커서하면 동시쓰기가능

 

-디폴트가 col 정렬

 

import React from 'react';

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

export default class App extends React.Component {

render() {

return (

<View style={styles.container}>

<View style={styles.redView} />

<View style={styles.yellowView} />

<View style={styles.redView} />

<View style={styles.yellowView} />

<View style={styles.redView} />

<View style={styles.yellowView} />

<View style={styles.redView} />

<View style={styles.yellowView} />

<View style={styles.redView} />

<View style={styles.yellowView} />

<View style={styles.redView} />

<View style={styles.yellowView} />

<View style={styles.redView} />

<View style={styles.yellowView} />

<View style={styles.redView} />

<View style={styles.yellowView} />

<View style={styles.redView} />

<View style={styles.yellowView} />

</View>

);

}

}

// 오브젝트 만들어서 위에 뷰에 붙임

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

//justifyContent: 'center',

justifyContent: 'flex-start',

alignItems: 'stretch',

flexDirection: 'row',

flexWrap:'wrap'

// css와 property가 다르다

// property 규칙: 두개의 단어를 대문자를 이용해서 이어주기

// 모든 value는 string,

// 쉼표를 사용해야함

// alignItems: 'center',

// justifyContent: 'center',

},

redView:{

//flex: 1, //비율

height:50,

width:50,

backgroundColor: 'red',

// alignSelf:'flex-start'

},

yellowView:{

//flex: 1, //비율

height:50,

width:50,

backgroundColor: 'yellow',

//alignSelf:'center'

}

});