react-native(리액트 네이티브) API - Border

react-native(리액트 네이티브) API - Border

const React = require('react')

const ReactNative = require('react-native')

const { StyleSheet, View, Text, ScrollView, } = ReactNative

const styles = StyleSheet.create({

box: {

width: 100,

height: 100,

},

borderRadius: {

borderWidth: 10,

borderRadius: 10,

borderColor: 'cyan',

},

border1: {

borderWidth: 10,

borderColor: 'brown',

},

border2: {

borderWidth: 10,

borderTopColor: 'red',

borderRightColor: 'yellow',

borderBottomColor: 'green',

borderLeftColor: 'blue',

},

border3: {

borderColor: 'purple',

borderTopWidth: 10,

borderRightWidth: 20,

borderBottomWidth: 30,

borderLeftWidth: 40,

},

border4: {

borderTopWidth: 10,

borderTopColor: 'red',

borderRightWidth: 20,

borderRightColor: 'yellow',

borderBottomWidth: 30,

borderBottomColor: 'green',

borderLeftWidth: 40,

borderLeftColor: 'blue',

},

border5: {

borderRadius: 50,

borderTopWidth: 10,

borderTopColor: 'red',

borderRightWidth: 20,

borderRightColor: 'yellow',

borderBottomWidth: 30,

borderBottomColor: 'green',

borderLeftWidth: 40,

borderLeftColor: 'blue',

},

border6: {

borderTopWidth: 10,

borderTopColor: 'red',

borderRightWidth: 20,

borderRightColor: 'yellow',

borderBottomWidth: 30,

borderBottomColor: 'green',

borderLeftWidth: 40,

borderLeftColor: 'blue',

borderTopLeftRadius: 100,

},

border7: {

borderWidth: 10,

borderColor: '#f007',

borderRadius: 30,

overflow: 'hidden',

},

border7_inner: {

backgroundColor: 'blue',

width: 100,

height: 100,

},

border8: {

width: 60,

height: 60,

borderColor: 'black',

marginRight: 10,

backgroundColor: 'lightgrey',

},

border9: {

borderWidth: 10,

borderTopLeftRadius: 10,

borderBottomRightRadius: 20,

borderColor: 'black',

},

border10: {

borderWidth: 10,

backgroundColor: 'white',

borderTopLeftRadius: 10,

borderBottomRightRadius: 20,

borderColor: 'black',

elevation: 10,

},

border11: {

width: 0,

height: 0,

borderStyle: 'solid',

overflow: 'hidden',

borderTopWidth: 50,

borderRightWidth: 0,

borderBottomWidth: 50,

borderLeftWidth: 100,

borderTopColor: 'transparent',

borderRightColor: 'transparent',

borderBottomColor: 'transparent',

borderLeftColor: 'red',

},

border12: {

borderStyle: 'solid',

overflow: 'hidden',

borderTopWidth: 10,

borderRightWidth: 20,

borderBottomWidth: 30,

borderLeftWidth: 40,

borderRadius: 20,

},

border13: {

borderStyle: 'solid',

overflow: 'hidden',

borderTopWidth: 10,

borderRightWidth: 20,

borderBottomWidth: 30,

borderLeftWidth: 40,

borderTopColor: 'red',

borderRightColor: 'green',

borderBottomColor: 'blue',

borderLeftColor: 'magenta',

borderRadius: 20,

},

border14: {

borderStyle: 'solid',

overflow: 'hidden',

borderTopWidth: 10,

borderRightWidth: 20,

borderBottomWidth: 30,

borderLeftWidth: 40,

borderTopColor: 'red',

borderRightColor: 'green',

borderBottomColor: 'blue',

borderLeftColor: 'magenta',

borderTopLeftRadius: 10,

borderTopRightRadius: 40,

borderBottomRightRadius: 30,

borderBottomLeftRadius: 40,

},

})

export default class BorderExample extends React.Component {

render() {

return(

<ScrollView>

<Text>Equal-Width / Same-Color | borderWidth & borderColor</Text>

<View style={[styles.box, styles.border1]} />

<Text>Equal-Width / Same-Color | borderWidth & borderColor & borderRadius</Text>

<View style={[styles.box, styles.borderRadius]} />

<Text>Equal-Width Borders | borderWidth & border*Color</Text>

<View style={[styles.box, styles.border2]} />

<Text>Same-Color Borders | border*Width & borderColor</Text>

<View style={[styles.box, styles.border3]} />

<Text>Custom Borders | border*Width & border*Color</Text>

<View style={[styles.box, styles.border4]} />

<Text>Custom Borders | border*Width & border*Color</Text>

<View style={[styles.box, styles.border5]} />

<Text>Custom Borders | border*Width & border*Color</Text>

<View style={[styles.box, styles.border6]} />

<Text>Custom Borders | borderRadius & clipping</Text>

<View style={[styles.box, styles.border7]}>

<View styles={styles.border7_inner} />

</View>

<Text>Single Borders | top, left, bottom right</Text>

<View style={{flexDirection: 'row'}}>

<View style={[styles.box, styles.border8, {borderTopWidth: 5}]} />

<View style={[styles.box, styles.border8, {borderLeftWidth: 5}]} />

<View style={[styles.box, styles.border8, {borderBottomWidth: 5}]} />

<View style={[styles.box, styles.border8, {borderRightWidth: 5}]} />

</View>

<Text>Corner Radii | borderTopLeftRadius & borderBottomRightRadius</Text>

<View style={[styles.box, styles.border9]} />

<Text>Corner Radii / Elevation | borderTopLeftRadius & borderBottomRightRadius & elevation</Text>

<View style={[styles.box, styles.border10]} />

<Text>CSS Trick - Triangle | create a triangle by manipulating border color and wodths</Text>

<View style={[styles.border11]} />

<Text>Curved border(Left|Right|Bottom|Top)Width | Make a non-uniform width curved border</Text>

<View style={[styles.box, styles.border12]} />

<Text>Curved border(Left|Right|Bottom|Top)Color | Make a non-uniform color curved border</Text>

<View style={[styles.box, styles.border13]} />

<Text>Curved border(Top|Bottom)(Left|Right)Radius | Make a non-uniform radius curved border</Text>

<View style={[styles.box, styles.border14]} />

</ScrollView>

)

}

}