اشکال هندسی در react native

در این آموزش متنی قصد داریم راجب اشکال هندسی صحبت و چند نمونه از اونهارو مورد برسی کنیم .
ابتدا باید بگم این اشکال جایگزین خوبی برای عکس های با حجم های مختلف است .خب بیاین شروع کنیم:
مربع:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.square} /> ); } } const styles = StyleSheet.create({ square: { width: 100, height: 100, backgroundColor: 'red' } }); |
مستطیل:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.rectangle} /> ); } } const styles = StyleSheet.create({ rectangle: { width: 100 * 2, height: 100, backgroundColor: 'red' } }); |
دایره:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.circle} /> ); } } const styles = StyleSheet.create({ circle: { width: 100, height: 100, borderRadius: 100/2, backgroundColor: 'red' } }); |
بیضی:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.oval} /> ); } } const styles = StyleSheet.create({ oval: { width: 100, height: 100, borderRadius: 50, backgroundColor: 'red', transform: [ {scaleX: 2} ] }, }); |
مثلث رو به بالا:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.triangle} /> ); } } const styles = StyleSheet.create({ triangle: { width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderLeftWidth: 50, borderRightWidth: 50, borderBottomWidth: 100, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: 'red' } }); |
مثلث رو به پایین:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.triangle} /> ); } } const styles = StyleSheet.create({ triangle: { width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderLeftWidth: 50, borderRightWidth: 50, borderBottomWidth: 100, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: 'red', transform: [ {rotate: '180deg'} ] } }); |
مثلث رو به چپ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.triangle} /> ); } } const styles = StyleSheet.create({ triangle: { width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderLeftWidth: 50, borderRightWidth: 50, borderBottomWidth: 100, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: 'red', transform: [ {rotate: '-90deg'} ] } }); |
مثلث رو به راست:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.triangle} /> ); } } const styles = StyleSheet.create({ triangle: { width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderLeftWidth: 50, borderRightWidth: 50, borderBottomWidth: 100, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: 'red', transform: [ {rotate: '90deg'} ] } }); |
مثلث رو به بالا چپ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.triangle} /> ); } } const styles = StyleSheet.create({ triangle: { width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderRightWidth: 100, borderTopWidth: 100, borderRightColor: 'transparent', borderTopColor: 'red' } }); |
مثلث رو به بالا راست:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.triangle} /> ); } } const styles = StyleSheet.create({ triangle: { width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderRightWidth: 100, borderTopWidth: 100, borderRightColor: 'transparent', borderTopColor: 'red', transform: [ {rotate: '90deg'} ] } }); |
مثلث رو به پایین چپ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.triangle} /> ); } } const styles = StyleSheet.create({ triangle: { width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderRightWidth: 100, borderTopWidth: 100, borderRightColor: 'transparent', borderTopColor: 'red', transform: [ {rotate: '270deg'} ] } }); |
مثلث رو به پایین راست:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.triangle} /> ); } } const styles = StyleSheet.create({ triangle: { width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderRightWidth: 100, borderTopWidth: 100, borderRightColor: 'transparent', borderTopColor: 'red', transform: [ {rotate: '180deg'} ] } }); |
ذوزنقه :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.trapezoid} /> ); } } const styles = StyleSheet.create({ trapezoid: { width: 200, height: , borderBottomWidth: 100, borderBottomColor: 'red', borderLeftWidth: 50, borderLeftColor: 'transparent', borderRightWidth: 50, borderRightColor: 'transparent', borderStyle: 'solid' } }); |
ستاره (6 گوش):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.starsix}> <View style={styles.starSixUp} /> <View style={styles.starSixDown} /> </View> ); } } const styles = StyleSheet.create({ starsix: { width: 100, height: 100 }, starSixUp: { position: 'absolute', top: , left: , width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderLeftWidth: 50, borderRightWidth: 50, borderBottomWidth: 100, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: 'red' }, starSixDown: { width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderLeftWidth: 50, borderRightWidth: 50, borderTopWidth: 100, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderTopColor: 'red', position: 'absolute', top: 25, left: } }); |
ستاره (5 گوش):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.starfive}> <View style={styles.starfiveTop} /> <View style={styles.starfiveBefore} /> <View style={styles.starfiveAfter} /> </View> ); } } const styles = StyleSheet.create({ starfiveTop: { position: 'absolute', top: -45, left: 37, width: , height: , backgroundColor: 'transparent', borderStyle: 'solid', borderLeftWidth: 50, borderRightWidth: 50, borderBottomWidth: 100, borderLeftColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: 'red' }, starfiveBefore: { backgroundColor: 'transparent', position: 'absolute', left: , top: , borderStyle: 'solid', borderRightWidth: 100, borderRightColor: 'transparent', borderBottomWidth: 70, borderBottomColor: 'red', borderLeftWidth: 100, borderLeftColor: 'transparent', transform: [ { rotate: '35deg'} ] }, starfiveAfter: { backgroundColor: 'transparent', position: 'absolute', top: , left: -25, width: , height: , borderStyle: 'solid', borderRightWidth: 100, borderRightColor: 'transparent', borderBottomWidth: 70, borderBottomColor: 'red', borderLeftWidth: 100, borderLeftColor: 'transparent', transform: [ { rotate: '-35deg'} ] } }); |
5 ضلعی:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.pentagon}> <View style={styles.pentagonInner} /> <View style={styles.pentagonBefore} /> </View> ); } } const styles = StyleSheet.create({ pentagon: { backgroundColor: 'transparent' }, pentagonInner: { width: 90, borderBottomColor: 'red', borderBottomWidth: , borderLeftColor: 'transparent', borderLeftWidth: 18, borderRightColor: 'transparent', borderRightWidth: 18, borderTopColor: 'red', borderTopWidth: 50 }, pentagonBefore: { position: 'absolute', height: , width: , top: -35, left: , borderStyle: 'solid', borderBottomColor: 'red', borderBottomWidth: 35, borderLeftColor: 'transparent', borderLeftWidth: 45, borderRightColor: 'transparent', borderRightWidth: 45, borderTopWidth: , borderTopColor: 'transparent', } }); |
6 ضلعی:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.hexagon}> <View style={styles.hexagonInner} /> <View style={styles.hexagonBefore} /> <View style={styles.hexagonAfter} /> </View> ); } } const styles = StyleSheet.create({ hexagon: { width: 100, height: 55 }, hexagonInner: { width: 100, height: 55, backgroundColor: 'red' }, hexagonAfter: { position: 'absolute', bottom: -25, left: , width: , height: , borderStyle: 'solid', borderLeftWidth: 50, borderLeftColor: 'transparent', borderRightWidth: 50, borderRightColor: 'transparent', borderTopWidth: 25, borderTopColor: 'red' }, hexagonBefore: { position: 'absolute', top: -25, left: , width: , height: , borderStyle: 'solid', borderLeftWidth: 50, borderLeftColor: 'transparent', borderRightWidth: 50, borderRightColor: 'transparent', borderBottomWidth: 25, borderBottomColor: 'red' } }); |
8 ضلعی:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.octagon}> <View style={[styles.octagonUp, styles.octagonBar]} /> <View style={[styles.octagonFlat, styles.octagonBar]} /> <View style={[styles.octagonLeft, styles.octagonBar]} /> <View style={[styles.octagonRight, styles.octagonBar]} /> </View> ); } } const styles = StyleSheet.create({ octagon: {}, octagonBar: { width: 42, height: 100, backgroundColor: 'red' }, octagonUp: {}, octagonFlat: { position: 'absolute', top: , left: , transform: [ {rotate: '90deg'} ] }, octagonLeft: { position: 'absolute', top: , left: , transform: [ {rotate: '-45deg'} ] }, octagonRight: { position: 'absolute', top: , left: , transform: [ {rotate: '45deg'} ] } }); |
8 ضلعی (گوشه تیز):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.eightPointBurst}> <View style={styles.eightPointBurst20} /> <View style={styles.eightPointBurst155} /> </View> ); } } const styles = StyleSheet.create({ eightPointBurst: { left:50, top:50 }, eightPointBurst20: { width: 80, height: 80, backgroundColor: 'red', transform: [ {rotate: '20deg'} ] }, eightPointBurst155: { width: 80, height: 80, position: 'absolute', backgroundColor: 'red', top: , left: , transform: [ {rotate: '155deg'} ] }, }); |
12 ضلعی (گوشه تیز):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.twelvePointBurst}> <View style={styles.twelvePointBurstMain} /> <View style={styles.twelvePointBurst30} /> <View style={styles.twelvePointBurst60} /> </View> ); } } const styles = StyleSheet.create({ twelvePointBurst: { left:50, top:50 }, twelvePointBurstMain: { width: 80, height: 80, backgroundColor: 'red', top: , right: , }, twelvePointBurst30: { width: 80, height: 80, position: 'absolute', backgroundColor: 'red', top: , left: , transform: [ {rotate: '30deg'} ] }, twelvePointBurst60: { width: 80, height: 80, position: 'absolute', backgroundColor: 'red', top: , left: , transform: [ {rotate: '60deg'} ] }, }); |
قلب:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.heart}> <View style={styles.leftHeart} /> <View style={styles.rightHeart} /> </View> ); } } const styles = StyleSheet.create({ heart: { width: 50, height: 50 }, leftHeart: { width: 30, height: 45, position: 'absolute', top: , borderTopRightRadius: 15, borderTopLeftRadius: 15, backgroundColor: 'red', transform: [ {rotate: '-45deg'} ], left: 5 }, rightHeart: { width: 30, height: 45, position: 'absolute', top: , borderTopLeftRadius: 15, borderTopRightRadius: 15, backgroundColor: 'red', transform: [ {rotate: '45deg'} ], right: 5 } }); |
لوزی:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.diamond} /> ); } } const styles = StyleSheet.create({ diamond:{ width: 50, height: 50, backgroundColor: 'red', transform: [ {rotate: '45deg'} ] } }); |
الماس:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.diamondShield}> <View style={styles.diamondShieldTop} /> <View style={styles.diamondShieldBottom} /> </View> ); } } const styles = StyleSheet.create({ diamondShield: { width: 100, height: 100 }, diamondShieldTop: { width: , height: , borderTopWidth: 50, borderTopColor: 'transparent', borderLeftColor: 'transparent', borderLeftWidth: 50, borderRightColor: 'transparent', borderRightWidth: 50, borderBottomColor: 'red', borderBottomWidth: 20, }, diamondShieldBottom: { width: , height: , borderTopWidth: 70, borderTopColor: 'red', borderLeftColor: 'transparent', borderLeftWidth: 50, borderRightColor: 'transparent', borderRightWidth: 50, borderBottomColor: 'transparent', borderBottomWidth: 50, } }); |
لوزی باریک:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.diamondNarrow}> <View style={styles.diamondNarrowTop} /> <View style={styles.diamondNarrowBottom} /> </View> ); } } const styles = StyleSheet.create({ diamondNarrow: { width: 100, height: 100 }, diamondNarrowTop: { width: , height: , borderTopWidth: 50, borderTopColor: 'transparent', borderLeftColor: 'transparent', borderLeftWidth: 50, borderRightColor: 'transparent', borderRightWidth: 50, borderBottomColor: 'red', borderBottomWidth: 70, }, diamondNarrowBottom: { width: , height: , borderTopWidth: 70, borderTopColor: 'red', borderLeftColor: 'transparent', borderLeftWidth: 50, borderRightColor: 'transparent', borderRightWidth: 50, borderBottomColor: 'transparent', borderBottomWidth: 50, } }); |
الماس برش خورده:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.cutDiamond}> <View style={styles.cutDiamondTop} /> <View style={styles.cutDiamondBottom} /> </View> ); } } const styles = StyleSheet.create({ cutDiamond: { width: 100, height: 100, }, cutDiamondTop: { width: 100, height: , borderTopWidth: , borderTopColor: 'transparent', borderLeftColor: 'transparent', borderLeftWidth: 25, borderRightColor: 'transparent', borderRightWidth: 25, borderBottomColor: 'red', borderBottomWidth: 25, }, cutDiamondBottom: { width: , height: , borderTopWidth: 70, borderTopColor: 'red', borderLeftColor: 'transparent', borderLeftWidth: 50, borderRightColor: 'transparent', borderRightWidth: 50, borderBottomColor: 'transparent', borderBottomWidth: , } }); |
پک من:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.pacman}/> ); } } const styles = StyleSheet.create({ pacman: { width: , height: , borderTopWidth: 60, borderTopColor: 'red', borderLeftColor: 'red', borderLeftWidth: 60, borderRightColor: 'transparent', borderRightWidth: 60, borderBottomColor: 'red', borderBottomWidth: 60, borderTopLeftRadius: 60, borderTopRightRadius: 60, borderBottomRightRadius: 60, borderBottomLeftRadius: 60 } }); |
حباب گفتگو:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.talkBubble}> <View style={styles.talkBubbleSquare} /> <View style={styles.talkBubbleTriangle} /> </View> ); } } const styles = StyleSheet.create({ talkBubble: { backgroundColor: 'transparent', paddingLeft: 50 }, talkBubbleSquare: { width: 120, height: 80, backgroundColor: 'red', borderRadius: 10 }, talkBubbleTriangle: { position: 'absolute', left: 26, top: 26, width: , height: , borderTopColor: 'transparent', borderTopWidth: 13, borderRightWidth: 26, borderRightColor: 'red', borderBottomWidth: 13, borderBottomColor: 'transparent' } }); |
یین یانگ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.yinyang}> <View style={styles.yinyangMain} /> <View style={styles.yinyangBefore} /> <View style={styles.yinyangAfter} /> </View> ); } } const styles = StyleSheet.create({ yinyang: { }, yinyangMain: { width: 100, height: 100, borderColor: 'red', borderTopWidth: 2, borderLeftWidth: 2, borderBottomWidth: 50, borderRightWidth: 2, borderRadius: 50 }, yinyangBefore: { position: 'absolute', top: 24, left: 50, borderColor: 'white', borderWidth: 24, borderRadius: 30, }, yinyangAfter: { position: 'absolute', top: 24, left: 1, backgroundColor: 'red', borderColor: 'red', borderWidth: 25, borderRadius: 30, } }); |
نشان:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.badgeRibbon}> <View style={styles.badgeRibbonCircle} /> <View style={styles.badgeRibbonNeg140} /> <View style={styles.badgeRibbon140} /> </View> ); } } const styles = StyleSheet.create({ badgeRibbonCircle: { width: 100, height: 100, backgroundColor: 'red', borderRadius: 50 }, badgeRibbon140: { backgroundColor:'transparent', borderBottomWidth: 70, borderBottomColor: 'red', borderLeftWidth: 40, borderLeftColor: 'transparent', borderRightWidth: 40, borderRightColor: 'transparent', position: 'absolute', top: 70, left: 28, transform: [ {rotate: '140deg'} ] }, badgeRibbonNeg140: { backgroundColor:'transparent', borderBottomWidth: 70, borderBottomColor: 'red', borderLeftWidth: 40, borderLeftColor: 'transparent', borderRightWidth: 40, borderRightColor: 'transparent', position: 'absolute', top: 70, left: -10, transform: [ {rotate: '-140deg'} ] } }); |
صفحه تلویزیون:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.tvscreen}> <View style={styles.tvscreenMain} /> <View style={styles.tvscreenTop} /> <View style={styles.tvscreenBottom} /> </View> ); } } const styles = StyleSheet.create({ tvscreen: { left:50, top:50 }, tvscreenMain: { width: 150, height: 75, backgroundColor: 'red', borderTopLeftRadius: 15, borderTopRightRadius: 15, borderBottomRightRadius: 15, borderBottomLeftRadius: 15, }, tvscreenTop: { width: 73, height: 70, backgroundColor: 'red', position: 'absolute', top: -26, left: 39, borderRadius: 35, transform: [ {scaleX: 2}, {scaleY: .5} ] }, tvscreenBottom: { width: 73, height: 70, backgroundColor: 'red', position: 'absolute', bottom: -26, left: 39, borderRadius: 35, transform: [ {scaleX: 2}, {scaleY: .5} ] }, }); |
شورن(Chevron):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.chevron}> <View style={styles.chevronMain} /> <View style={[styles.chevronTriangle, styles.chevronTopLeft]} /> <View style={[styles.chevronTriangle, styles.chevronTopRight]} /> <View style={[styles.chevronTriangle, styles.chevronBottomLeft]} /> <View style={[styles.chevronTriangle, styles.chevronBottomRight]} /> </View> ); } } const styles = StyleSheet.create({ chevron: { width: 150, height: 50, top:50, left:50 }, chevronMain: { width: 150, height: 50, backgroundColor: 'red' }, chevronTriangle: { backgroundColor: 'transparent', borderTopWidth: 20, borderRightWidth: , borderBottomWidth: , borderLeftWidth: 75, borderTopColor: 'transparent', borderBottomColor: 'transparent', borderRightColor: 'transparent', borderLeftColor: 'red', }, chevronTopLeft: { position: 'absolute', top: -20, left: }, chevronTopRight: { position: 'absolute', top: -20, right: , transform: [ {scaleX: -1} ] }, chevronBottomLeft: { position: 'absolute', bottom: -20, left: , transform: [ {scale: -1 } ] }, chevronBottomRight: { position: 'absolute', bottom: -20, right: , transform: [ {scaleY: -1} ] } }); |
ذره بین:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.magnifyingGlass}> <View style={styles.magnifyingGlassCircle} /> <View style={styles.magnifyingGlassStick} /> </View> ); } } const styles = StyleSheet.create({ magnifyingGlass: { }, magnifyingGlassCircle: { width: 100, height: 100, borderRadius: 50, borderWidth: 15, borderColor: 'red' }, magnifyingGlassStick: { position: 'absolute', left: 78, bottom: -6, backgroundColor: 'red', width: 50, height: 10, transform: [ {rotate: '45deg'} ] } }); |
آیکون فیس بوک:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.facebook}> <View style={styles.facebookMain}> <View style={styles.facebookCurve} /> <View style={styles.facebookBefore} /> <View style={styles.facebookAfter} /> <View style={styles.facebookRedCover} /> </View> </View> ); } } const styles = StyleSheet.create({ facebook: { width: 100, height: 110, }, facebookMain: { backgroundColor: 'red', width: 100, height: 110, borderRadius: 5, borderColor: 'red', borderTopWidth: 15, borderLeftWidth: 15, borderRightWidth: 15, borderBottomWidth: , overflow: 'hidden' }, facebookRedCover: { width: 10, height: 20, backgroundColor: 'red', position: 'absolute', right: , top: 5 }, facebookCurve: { width: 50, borderWidth: 20, borderTopWidth: 20, borderTopColor: 'white', borderBottomColor: 'transparent', borderLeftColor: 'white', borderRightColor: 'transparent', borderRadius: 20, position: 'absolute', right: -8, top: 5 }, facebookBefore: { position: 'absolute', backgroundColor: 'white', width: 20, height: 70, bottom: , right: 22, }, facebookAfter: { position: 'absolute', width: 55, top: 50, height: 20, backgroundColor: 'white', right: 5 } }); |
پرچم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.flag}> <View style={styles.flagTop} /> <View style={styles.flagBottom} /> </View> ); } } const styles = StyleSheet.create({ flag: { top:50, left:50 }, flagTop: { width: 110, height: 56, backgroundColor: 'red', }, flagBottom: { position: 'absolute', left: , bottom: -13, width: , height: , borderBottomWidth: 13, borderBottomColor: 'transparent', borderLeftWidth: 55, borderLeftColor: 'red', borderRightWidth: 55, borderRightColor: 'red' } }); |
مخروط:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.cone} /> ); } } const styles = StyleSheet.create({ cone: { width: , height: , borderLeftWidth: 55, borderLeftColor: 'transparent', borderRightWidth: 55, borderRightColor: 'transparent', borderTopWidth: 100, borderTopColor: 'red', borderRadius: 55 } }); |
جمع:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.cross}> <View style={styles.crossUp} /> <View style={styles.crossFlat} /> </View> ); } } const styles = StyleSheet.create({ cross: { top:50, left:50 }, crossUp: { backgroundColor: 'red', height: 100, width: 20 }, crossFlat: { backgroundColor: 'red', height: 20, width: 100, position: 'absolute', left: -40, top: 40 } }); |
خانه:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import React,{Component} from 'react'; import { StyleSheet, View, } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.base}> <View style={styles.baseTop} /> <View style={styles.baseBottom} /> </View> ); } } const styles = StyleSheet.create({ base: { top:50, left:50 }, baseTop: { borderBottomWidth: 35, borderBottomColor: 'red', borderLeftWidth: 50, borderLeftColor: 'transparent', borderRightWidth: 50, borderRightColor: 'transparent', height: , width: , left: , top: -35, position: 'absolute', }, baseBottom: { backgroundColor: 'red', height: 55, width: 100 } }); |
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
گاهی اوقات هنگام توسعه برنامهها با React Native، در موقعیتی...
تفاوت توسعه برنامه های android و ios
هر توسعه دهنده ای زمانی که می خواهد یکی از...
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
Flipper یک ابزار debugging توسعه داده شده توسط فیسبوک است...
نمایش PDF در react native
pdf یکی از پرکاربردترین و محبوب ترین فرمت های document...
استفاده از Mapbox در react native (ری اکت نیتیو)
Mapbox یکی از بهترین جایگزین های توصیه شده برای Google...
نمایش عکس های گوشی در react native (ری اکت نیتیو)
در این نوشته تصمیم گرفتم در مورد نمایش عکس های...
دیدگاهتان را بنویسید