[리엑트 네이티브] 스타일 변경

[1] inline

 <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> 

[2] style object mapping

<View style={styles.B_box} />

const styles = StyleSheet.create({
     B_box : {width: 50, height: 50, backgroundColor: 'black'}
});

 <전체코드>

import React from 'react';
import { AppRegistry, View, StyleSheet } from 'react-native';
				
class Example extends React.Component {

  render() {
	return (
	  <View style={{flex: 1, flexDirection: 'column'}}>
		<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
		<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
		<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        <View style={styles.B_box} />
	  </View>
	);
  }
};

const styles = StyleSheet.create({
     B_box : {width: 50, height: 50, backgroundColor: 'black'}
  });


AppRegistry.registerComponent('AwesomeProject', () => Example);
						  

웹에서 구현했던 것과 거의 동일하게 구현하면 된다. 참 쉽고 간편하다.