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

در این آموزش متنی قصد داریم راجب اشکال هندسی صحبت و چند نمونه از اونهارو مورد برسی کنیم .

ابتدا باید بگم این اشکال جایگزین خوبی برای عکس های با حجم های مختلف است .خب بیاین شروع کنیم:

مربع:

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'
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

square: {

width: 100,

height: 100,

backgroundColor: 'red'

}

});

مستطیل:

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'
}
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

rectangle: {

width: 100 * 2,

height: 100,

backgroundColor: 'red'

}

});

دایره:

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'
}
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

circle: {

width: 100,

height: 100,

borderRadius: 100/2,

backgroundColor: 'red'

}

});

بیضی:

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}
    ]
  },
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

oval: {

width: 100,

height: 100,

borderRadius: 50,

backgroundColor: 'red',

transform: [

{scaleX: 2}

]

});

مثلث رو به بالا:

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: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'red'
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

triangle: {

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderLeftWidth: 50,

borderRightWidth: 50,

borderBottomWidth: 100,

borderLeftColor: 'transparent',

borderRightColor: 'transparent',

borderBottomColor: 'red'

}

});

مثلث رو به پایین:

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: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'red',
    transform: [
      {rotate: '180deg'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

triangle: {

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderLeftWidth: 50,

borderRightWidth: 50,

borderBottomWidth: 100,

borderLeftColor: 'transparent',

borderRightColor: 'transparent',

borderBottomColor: 'red',

transform: [

{rotate: '180deg'}

]

}

});

مثلث رو به چپ:

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: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'red',
    transform: [
      {rotate: '-90deg'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

triangle: {

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderLeftWidth: 50,

borderRightWidth: 50,

borderBottomWidth: 100,

borderLeftColor: 'transparent',

borderRightColor: 'transparent',

borderBottomColor: 'red',

transform: [

{rotate: '-90deg'}

]

}

});

مثلث رو به راست:

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: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'red',
    transform: [
      {rotate: '90deg'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

triangle: {

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderLeftWidth: 50,

borderRightWidth: 50,

borderBottomWidth: 100,

borderLeftColor: 'transparent',

borderRightColor: 'transparent',

borderBottomColor: 'red',

transform: [

{rotate: '90deg'}

]

}

});

مثلث رو به بالا چپ:

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: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderTopWidth: 100,
    borderRightColor: 'transparent',
    borderTopColor: 'red'
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

triangle: {

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderRightWidth: 100,

borderTopWidth: 100,

borderRightColor: 'transparent',

borderTopColor: 'red'

}

});

مثلث رو به بالا راست:

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: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderTopWidth: 100,
    borderRightColor: 'transparent',
    borderTopColor: 'red',
    transform: [
      {rotate: '90deg'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

triangle: {

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderRightWidth: 100,

borderTopWidth: 100,

borderRightColor: 'transparent',

borderTopColor: 'red',

transform: [

{rotate: '90deg'}

]

}

});

مثلث رو به پایین چپ:

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: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderTopWidth: 100,
    borderRightColor: 'transparent',
    borderTopColor: 'red',
    transform: [
      {rotate: '270deg'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

triangle: {

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderRightWidth: 100,

borderTopWidth: 100,

borderRightColor: 'transparent',

borderTopColor: 'red',

transform: [

{rotate: '270deg'}

]

}

});

مثلث رو به پایین راست:

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: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderTopWidth: 100,
    borderRightColor: 'transparent',
    borderTopColor: 'red',
    transform: [
      {rotate: '180deg'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

triangle: {

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderRightWidth: 100,

borderTopWidth: 100,

borderRightColor: 'transparent',

borderTopColor: 'red',

transform: [

{rotate: '180deg'}

]

}

});

ذوزنقه :

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: 0,
    borderBottomWidth: 100,
    borderBottomColor: 'red',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderStyle: 'solid'
  } 
});

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: 0,

borderBottomWidth: 100,

borderBottomColor: 'red',

borderLeftWidth: 50,

borderLeftColor: 'transparent',

borderRightWidth: 50,

borderRightColor: 'transparent',

borderStyle: 'solid'

}

});

ستاره (6 گوش):

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: 0,
    left: 0,
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'red'
  },
  starSixDown: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderTopWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderTopColor: 'red',
    position: 'absolute',
    top: 25,
    left: 0
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

starsix: {

width: 100,

height: 100

starSixUp: {

position: 'absolute',

top: 0,

left: 0,

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderLeftWidth: 50,

borderRightWidth: 50,

borderBottomWidth: 100,

borderLeftColor: 'transparent',

borderRightColor: 'transparent',

borderBottomColor: 'red'

starSixDown: {

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderLeftWidth: 50,

borderRightWidth: 50,

borderTopWidth: 100,

borderLeftColor: 'transparent',

borderRightColor: 'transparent',

borderTopColor: 'red',

position: 'absolute',

top: 25,

left: 0

}

});

ستاره (5 گوش):

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: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'red'

  },
  starfiveBefore: {
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    top: 0,
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderRightColor: 'transparent',
    borderBottomWidth: 70,
    borderBottomColor: 'red',
    borderLeftWidth: 100,
    borderLeftColor: 'transparent',
    transform: [
      { rotate: '35deg'}
    ]
  },
  starfiveAfter: {
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 0,
    left: -25,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderRightColor: 'transparent',
    borderBottomWidth: 70,
    borderBottomColor: 'red',
    borderLeftWidth: 100,
    borderLeftColor: 'transparent',
    transform: [
      { rotate: '-35deg'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

starfiveTop: {

position: 'absolute',

top: -45,

left: 37,

width: 0,

height: 0,

backgroundColor: 'transparent',

borderStyle: 'solid',

borderLeftWidth: 50,

borderRightWidth: 50,

borderBottomWidth: 100,

borderLeftColor: 'transparent',

borderRightColor: 'transparent',

borderBottomColor: 'red'

starfiveBefore: {

backgroundColor: 'transparent',

position: 'absolute',

left: 0,

top: 0,

borderStyle: 'solid',

borderRightWidth: 100,

borderRightColor: 'transparent',

borderBottomWidth: 70,

borderBottomColor: 'red',

borderLeftWidth: 100,

borderLeftColor: 'transparent',

transform: [

{ rotate: '35deg'}

]

starfiveAfter: {

backgroundColor: 'transparent',

position: 'absolute',

top: 0,

left: -25,

width: 0,

height: 0,

borderStyle: 'solid',

borderRightWidth: 100,

borderRightColor: 'transparent',

borderBottomWidth: 70,

borderBottomColor: 'red',

borderLeftWidth: 100,

borderLeftColor: 'transparent',

transform: [

{ rotate: '-35deg'}

]

}

});

5 ضلعی:

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: 0,
    borderLeftColor: 'transparent',
    borderLeftWidth: 18,
    borderRightColor: 'transparent',
    borderRightWidth: 18,
    borderTopColor: 'red',
    borderTopWidth: 50
  },
  pentagonBefore: {
    position: 'absolute',
    height: 0,
    width: 0,
    top: -35,
    left: 0,
    borderStyle: 'solid',
    borderBottomColor: 'red',
    borderBottomWidth: 35,
    borderLeftColor: 'transparent',
    borderLeftWidth: 45,
    borderRightColor: 'transparent',
    borderRightWidth: 45,
    borderTopWidth: 0,
    borderTopColor: 'transparent',
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

pentagon: {

backgroundColor: 'transparent'

pentagonInner: {

width: 90,

borderBottomColor: 'red',

borderBottomWidth: 0,

borderLeftColor: 'transparent',

borderLeftWidth: 18,

borderRightColor: 'transparent',

borderRightWidth: 18,

borderTopColor: 'red',

borderTopWidth: 50

pentagonBefore: {

position: 'absolute',

height: 0,

width: 0,

top: -35,

left: 0,

borderStyle: 'solid',

borderBottomColor: 'red',

borderBottomWidth: 35,

borderLeftColor: 'transparent',

borderLeftWidth: 45,

borderRightColor: 'transparent',

borderRightWidth: 45,

borderTopWidth: 0,

borderTopColor: 'transparent',

}

});

6 ضلعی:

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: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderTopWidth: 25,
    borderTopColor: 'red'
  },
  hexagonBefore: {
    position: 'absolute',
    top: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderBottomWidth: 25,
    borderBottomColor: 'red'

  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

hexagon: {

width: 100,

height: 55

hexagonInner: {

width: 100,

height: 55,

backgroundColor: 'red'

hexagonAfter: {

position: 'absolute',

bottom: -25,

left: 0,

width: 0,

height: 0,

borderStyle: 'solid',

borderLeftWidth: 50,

borderLeftColor: 'transparent',

borderRightWidth: 50,

borderRightColor: 'transparent',

borderTopWidth: 25,

borderTopColor: 'red'

hexagonBefore: {

position: 'absolute',

top: -25,

left: 0,

width: 0,

height: 0,

borderStyle: 'solid',

borderLeftWidth: 50,

borderLeftColor: 'transparent',

borderRightWidth: 50,

borderRightColor: 'transparent',

borderBottomWidth: 25,

borderBottomColor: 'red'

}

});

8 ضلعی:

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: 0,
    left: 0,
    transform: [
      {rotate: '90deg'}
    ]
  },
  octagonLeft: {
    position: 'absolute',
    top: 0,
    left: 0,
    transform: [
      {rotate: '-45deg'}
    ]
  },
  octagonRight: {
    position: 'absolute',
    top: 0,
    left: 0,
    transform: [
      {rotate: '45deg'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

octagon: {},

octagonBar: {

width: 42,

height: 100,

backgroundColor: 'red'

octagonUp: {},

octagonFlat: {

position: 'absolute',

top: 0,

left: 0,

transform: [

{rotate: '90deg'}

]

octagonLeft: {

position: 'absolute',

top: 0,

left: 0,

transform: [

{rotate: '-45deg'}

]

octagonRight: {

position: 'absolute',

top: 0,

left: 0,

transform: [

{rotate: '45deg'}

]

}

});

8 ضلعی (گوشه تیز):

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: 0,
    left: 0,
    transform: [
      {rotate: '155deg'}
    ]
  },
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</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: 0,

left: 0,

transform: [

{rotate: '155deg'}

]

});

12 ضلعی (گوشه تیز):

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: 0,
    right: 0,
  },
  twelvePointBurst30: {
    width: 80, 
    height: 80,
    position: 'absolute',
    backgroundColor: 'red',
    top: 0,
    left: 0,
    transform: [
      {rotate: '30deg'}
    ]
  },
  twelvePointBurst60: {
    width: 80, 
    height: 80,
    position: 'absolute',
    backgroundColor: 'red',
    top: 0,
    left: 0,
    transform: [
      {rotate: '60deg'}
    ]
  },
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

twelvePointBurst: {

left:50,

top:50

twelvePointBurstMain: {

width: 80,

height: 80,

backgroundColor: 'red',

top: 0,

right: 0,

twelvePointBurst30: {

width: 80,

height: 80,

position: 'absolute',

backgroundColor: 'red',

top: 0,

left: 0,

transform: [

{rotate: '30deg'}

]

twelvePointBurst60: {

width: 80,

height: 80,

position: 'absolute',

backgroundColor: 'red',

top: 0,

left: 0,

transform: [

{rotate: '60deg'}

]

});

قلب:

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: 0,
    borderTopRightRadius: 15,
    borderTopLeftRadius: 15,
    backgroundColor: 'red',
    transform: [
        {rotate: '-45deg'}
    ],
    left: 5
  },
  rightHeart: {
    width: 30,
    height: 45,
    position: 'absolute',
    top: 0,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    backgroundColor: 'red',
    transform: [
        {rotate: '45deg'}
    ],
    right: 5
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

heart: {

width: 50,

height: 50

leftHeart: {

width: 30,

height: 45,

position: 'absolute',

top: 0,

borderTopRightRadius: 15,

borderTopLeftRadius: 15,

backgroundColor: 'red',

transform: [

{rotate: '-45deg'}

left: 5

rightHeart: {

width: 30,

height: 45,

position: 'absolute',

top: 0,

borderTopLeftRadius: 15,

borderTopRightRadius: 15,

backgroundColor: 'red',

transform: [

{rotate: '45deg'}

right: 5

}

});

لوزی:

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'}
    ]    
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

diamond:{

width: 50,

height: 50,

backgroundColor: 'red',

transform: [

{rotate: '45deg'}

]

}

});

الماس:

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: 0,
    height: 0,
    borderTopWidth: 50,
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderLeftWidth: 50,
    borderRightColor: 'transparent',
    borderRightWidth: 50,
    borderBottomColor: 'red',
    borderBottomWidth: 20,
  },
  diamondShieldBottom: {
    width: 0,
    height: 0,
    borderTopWidth: 70,
    borderTopColor: 'red',
    borderLeftColor: 'transparent',
    borderLeftWidth: 50,
    borderRightColor: 'transparent',
    borderRightWidth: 50,
    borderBottomColor: 'transparent',
    borderBottomWidth: 50,
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View> );

}

const styles = StyleSheet.create({

diamondShield: {

width: 100,

height: 100

diamondShieldTop: {

width: 0,

height: 0,

borderTopWidth: 50,

borderTopColor: 'transparent',

borderLeftColor: 'transparent',

borderLeftWidth: 50,

borderRightColor: 'transparent',

borderRightWidth: 50,

borderBottomColor: 'red',

borderBottomWidth: 20,

diamondShieldBottom: {

width: 0,

height: 0,

borderTopWidth: 70,

borderTopColor: 'red',

borderLeftColor: 'transparent',

borderLeftWidth: 50,

borderRightColor: 'transparent',

borderRightWidth: 50,

borderBottomColor: 'transparent',

borderBottomWidth: 50,

}

});

لوزی باریک:

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: 0,
    height: 0,
    borderTopWidth: 50,
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderLeftWidth: 50,
    borderRightColor: 'transparent',
    borderRightWidth: 50,
    borderBottomColor: 'red',
    borderBottomWidth: 70,  
  },
  diamondNarrowBottom: {
    width: 0,
    height: 0,
    borderTopWidth: 70,
    borderTopColor: 'red',
    borderLeftColor: 'transparent',
    borderLeftWidth: 50,
    borderRightColor: 'transparent',
    borderRightWidth: 50,
    borderBottomColor: 'transparent',
    borderBottomWidth: 50, 
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

diamondNarrow: {

width: 100,

height: 100

diamondNarrowTop: {

width: 0,

height: 0,

borderTopWidth: 50,

borderTopColor: 'transparent',

borderLeftColor: 'transparent',

borderLeftWidth: 50,

borderRightColor: 'transparent',

borderRightWidth: 50,

borderBottomColor: 'red',

borderBottomWidth: 70,

diamondNarrowBottom: {

width: 0,

height: 0,

borderTopWidth: 70,

borderTopColor: 'red',

borderLeftColor: 'transparent',

borderLeftWidth: 50,

borderRightColor: 'transparent',

borderRightWidth: 50,

borderBottomColor: 'transparent',

borderBottomWidth: 50,

}

});

الماس برش خورده:

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: 0,
    borderTopWidth: 0,
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderLeftWidth: 25,
    borderRightColor: 'transparent',
    borderRightWidth: 25,
    borderBottomColor: 'red',
    borderBottomWidth: 25, 
  },
  cutDiamondBottom: {
    width: 0,
    height: 0,
    borderTopWidth: 70,
    borderTopColor: 'red',
    borderLeftColor: 'transparent',
    borderLeftWidth: 50,
    borderRightColor: 'transparent',
    borderRightWidth: 50,
    borderBottomColor: 'transparent',
    borderBottomWidth: 0, 
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

cutDiamond: {

width: 100,

height: 100,

cutDiamondTop: {

width: 100,

height: 0,

borderTopWidth: 0,

borderTopColor: 'transparent',

borderLeftColor: 'transparent',

borderLeftWidth: 25,

borderRightColor: 'transparent',

borderRightWidth: 25,

borderBottomColor: 'red',

borderBottomWidth: 25,

cutDiamondBottom: {

width: 0,

height: 0,

borderTopWidth: 70,

borderTopColor: 'red',

borderLeftColor: 'transparent',

borderLeftWidth: 50,

borderRightColor: 'transparent',

borderRightWidth: 50,

borderBottomColor: 'transparent',

borderBottomWidth: 0,

}

});

پک من:

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: 0,
    height: 0,
    borderTopWidth: 60,
    borderTopColor: 'red',
    borderLeftColor: 'red',
    borderLeftWidth: 60,
    borderRightColor: 'transparent',
    borderRightWidth: 60,
    borderBottomColor: 'red',
    borderBottomWidth: 60, 
    borderTopLeftRadius: 60,
    borderTopRightRadius: 60,
    borderBottomRightRadius: 60,
    borderBottomLeftRadius: 60
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

pacman: {

width: 0,

height: 0,

borderTopWidth: 60,

borderTopColor: 'red',

borderLeftColor: 'red',

borderLeftWidth: 60,

borderRightColor: 'transparent',

borderRightWidth: 60,

borderBottomColor: 'red',

borderBottomWidth: 60,

borderTopLeftRadius: 60,

borderTopRightRadius: 60,

borderBottomRightRadius: 60,

borderBottomLeftRadius: 60

}

});

حباب گفتگو:

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: 0,
    height: 0,
    borderTopColor: 'transparent',
    borderTopWidth: 13,
    borderRightWidth: 26,
    borderRightColor: 'red',
    borderBottomWidth: 13,
    borderBottomColor: 'transparent'
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</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: 0,

height: 0,

borderTopColor: 'transparent',

borderTopWidth: 13,

borderRightWidth: 26,

borderRightColor: 'red',

borderBottomWidth: 13,

borderBottomColor: 'transparent'

}

});

یین یانگ:

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,
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</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,

}

});

نشان:

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'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</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'}

]

}

});

صفحه تلویزیون:

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}
    ]
  },
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</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):

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: 0,
    borderBottomWidth: 0,
    borderLeftWidth: 75,
    borderTopColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
    borderLeftColor: 'red',
  },
  chevronTopLeft: {
    position: 'absolute',
    top: -20,
    left: 0
  },
  chevronTopRight: {
    position: 'absolute',
    top: -20,
    right: 0,
    transform: [
      {scaleX: -1}
    ]
  },
  chevronBottomLeft: {
    position: 'absolute',
    bottom: -20,
    left: 0,
    transform: [
      {scale: -1 }
    ]
  },     
  chevronBottomRight: {
    position: 'absolute',
    bottom: -20,
    right: 0,
    transform: [
      {scaleY: -1}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</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: 0,

borderBottomWidth: 0,

borderLeftWidth: 75,

borderTopColor: 'transparent',

borderBottomColor: 'transparent',

borderRightColor: 'transparent',

borderLeftColor: 'red',

chevronTopLeft: {

position: 'absolute',

top: -20,

left: 0

chevronTopRight: {

position: 'absolute',

top: -20,

right: 0,

transform: [

{scaleX: -1}

]

chevronBottomLeft: {

position: 'absolute',

bottom: -20,

left: 0,

transform: [

{scale: -1 }

]

chevronBottomRight: {

position: 'absolute',

bottom: -20,

right: 0,

transform: [

{scaleY: -1}

]

}

});

ذره بین:

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'}
    ]
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</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'}

]

}

});

آیکون فیس بوک:

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: 0,
    overflow: 'hidden'

  },
  facebookRedCover: {
    width: 10,
    height: 20,
    backgroundColor: 'red',
    position: 'absolute',
    right: 0,
    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: 0,
    right: 22,
  },
  facebookAfter: {
    position: 'absolute',
    width: 55,
    top: 50,
    height: 20,
    backgroundColor: 'white',
    right: 5
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</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: 0,

overflow: 'hidden'

facebookRedCover: {

width: 10,

height: 20,

backgroundColor: 'red',

position: 'absolute',

right: 0,

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: 0,

right: 22,

facebookAfter: {

position: 'absolute',

width: 55,

top: 50,

height: 20,

backgroundColor: 'white',

right: 5

}

});

پرچم:

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: 0,
    bottom: -13,
    width: 0,
    height: 0,
    borderBottomWidth: 13,
    borderBottomColor: 'transparent',
    borderLeftWidth: 55,
    borderLeftColor: 'red',
    borderRightWidth: 55,
    borderRightColor: 'red'
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

flag: {

top:50,

left:50

flagTop: {

width: 110,

height: 56,

backgroundColor: 'red',

flagBottom: {

position: 'absolute',

left: 0,

bottom: -13,

width: 0,

height: 0,

borderBottomWidth: 13,

borderBottomColor: 'transparent',

borderLeftWidth: 55,

borderLeftColor: 'red',

borderRightWidth: 55,

borderRightColor: 'red'

}

});

مخروط:

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: 0,
    height: 0,
    borderLeftWidth: 55,
    borderLeftColor: 'transparent',
    borderRightWidth: 55,
    borderRightColor: 'transparent',
    borderTopWidth: 100,
    borderTopColor: 'red',
    borderRadius: 55
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

);

}

const styles = StyleSheet.create({

cone: {

width: 0,

height: 0,

borderLeftWidth: 55,

borderLeftColor: 'transparent',

borderRightWidth: 55,

borderRightColor: 'transparent',

borderTopWidth: 100,

borderTopColor: 'red',

borderRadius: 55

}

});

جمع:

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
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</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

}

});

خانه:

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: 0,
    width: 0,
    left: 0,
    top: -35,
    position: 'absolute',
  },
  baseBottom: {
    backgroundColor: 'red',
    height: 55,
    width: 100
  }
});

import React,{Component} from 'react';

import {

StyleSheet,

View,

} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

base: {

top:50,

left:50

baseTop: {

borderBottomWidth: 35,

borderBottomColor: 'red',

borderLeftWidth: 50,

borderLeftColor: 'transparent',

borderRightWidth: 50,

borderRightColor: 'transparent',

height: 0,

width: 0,

left: 0,

top: -35,

position: 'absolute',

baseBottom: {

backgroundColor: 'red',

height: 55,

width: 100

}

});

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

مطالب زیر را حتما بخوانید

طرح تخفیف تابستانه reactapp

7 اشتباه در توسعه اپلیکیشن های React Native

6 کتابخانه رابط کاربری React Native که باید در سال 2019 استفاده کنید

6 پروژه متن باز React Native برای یادگیری

تفاوت های اصلی بین ReactJS و React Native

دیدگاهتان را بنویسید لغو پاسخ

ورود

مطالب زیر را حتما بخوانید

طرح تخفیف تابستانه reactapp

7 اشتباه در توسعه اپلیکیشن های React Native

6 کتابخانه رابط کاربری React Native که باید در سال 2019 استفاده کنید

6 پروژه متن باز React Native برای یادگیری

تفاوت های اصلی بین ReactJS و React Native

دیدگاهتان را بنویسید لغو پاسخ