اشکال هندسی در 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: ,

height: ,

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

height: ,

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

height: ,

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

height: ,

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

height: ,

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

height: ,

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

height: ,

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

height: ,

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

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

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 گوش):

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

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 ضلعی:

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

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 ضلعی:

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

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 ضلعی:

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

left: ,

transform: [

{rotate: '90deg'}

]

octagonLeft: {

position: 'absolute',

top: ,

left: ,

transform: [

{rotate: '-45deg'}

]

octagonRight: {

position: 'absolute',

top: ,

left: ,

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

left: ,

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

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

]

});

قلب:

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

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

}

});

لوزی:

اضافه کردن icon درون TextInput در react native

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

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,

}

});

لوزی باریک:

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

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,

}

});

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

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

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

}

});

پک من:

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

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

}

});

حباب گفتگو:

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

height: ,

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

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}

]

}

});

ذره بین:

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

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

}

});

پرچم:

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

bottom: -13,

width: ,

height: ,

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

height: ,

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

width: ,

left: ,

top: -35,

position: 'absolute',

baseBottom: {

backgroundColor: 'red',

height: 55,

width: 100

}

});

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

مطالب زیر را حتما مطالعه کنید

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

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

نمایش عکس های گوشی در react native (ری اکت نیتیو)

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