La création de css cercles de réagir indigènes

Je vais avoir quelques problèmes lors de la création des css, des cercles réagir indigènes. Les œuvres suivantes de l'iPhone 6 Plus, mais dans tous les autres iPhones, ils deviennent des diamants.

circle: {
  height: 30,
  width: 30,
  borderRadius: 30,
}

Maintenant si j'utilise PixelRatio sur borderRadius il fonctionne en tout, mais l'iPhone 6 plus. iPhone 6 plus affiche des boîtes avec des coins arrondis.

circle: {
  height: 30,
  width: 30,
  borderRadius: 30 /PixelRatio.get(),
}
InformationsquelleAutor cgarvis | 2015-05-22
  1. 31

    borderRadius doit être à la moitié du côté du carré. Donc, 15, dans votre cas, peu importe ce que les pixels de l'appareil l'a fait.

    Il fonctionne avec 30 /PixelRatio.get() seulement pour 2x rétine dispositifs, provoquer le résultat est 15.
    Alors pour l'iPhone 6 Plus, vous pouvez en effet obtenir un arrondi de la boîte, parce que le résultat est de 10 (pixel-ratio est de 3).

    Je suis surpris que vous disiez il a travaillé sur l'iPhone 6 Plus avec 30 pour un carré 30x30.

    • Merci pour expliquer pourquoi PixelRatio.get ne fonctionne pas et renforçant l'idée que nous devrions simplement utiliser 50% de la place côté.
    InformationsquelleAutor Jean Regisser
  2. 30

    votre rayon des frontières devrait être la moitié de la largeur et de la hauteur de votre. comme ci-dessous:

    circle: {
   width: 44,
   height: 44,
   borderRadius: 44/2
}
    • Quoi de mal en utilisant borderRadius: '50%' ?
    • borderRadius: '50%' déclenche une erreur dans React16 et RN de 0,49. Je l'ai juste essayé avant de Googler et de trouver cette page.
    • android, et il ne regarde pas comme cercle , c'est comme round rect
    • Sur Android pixel ratio 3: (largeur=64, border-radius=32) => arrondie rect; (largeur=64, border-radius=64) => cercle. Sur iOS pixel ratio 2: (largeur=64, border-radius=32) => cercle; (largeur=64,border-radius=32) => forme de diamant. Difficile à régler pour les deux
    InformationsquelleAutor jsina
  3. 12

    Depuis borderRadius style s'attend à ce nombre comme une valeur que vous ne pouvez pas utiliser borderRadius: 50%. Pour faire cercle tout ce que vous avez à faire est d'utiliser votre image largeur/hauteur et divisez-le avec 2. Lire la suite ici:
    https://github.com/refinery29/react-native-cheat-sheet

    InformationsquelleAutor Abiola
  4. 11

    Aucun de ces l'adapter à mes besoins, si vous avez besoin d'un sensible cercle, vous pouvez essayer d'utiliser ma solution:

    Étape 1: Importation Dimensions (et d'autres éléments utilisés) de réagir natif (ou ajouter à l'existant, les importations de la liste)

    import { Dimensions, TouchableHighlight, Text } from 'react-native';

    Étape 2: Ajouter votre élément tactile (vous pouvez calculer la largeur ou la hauteur d'un appareil)

        <TouchableHighlight
      style = {{
        borderRadius: Math.round(Dimensions.get('window').width + Dimensions.get('window').height) /2,
        width: Dimensions.get('window').width * 0.5,
        height: Dimensions.get('window').width * 0.5,
        backgroundColor:'#f00',
        justifyContent: 'center',
        alignItems: 'center'
      }}
      underlayColor = '#ccc'
      onPress = { () => alert('Yaay!') }
    >
      <Text> Mom, look, I am a circle! </Text>
    </TouchableHighlight>

    Étape 3: Profiter de votre réceptif encerclé élément

    La création de css cercles de réagir indigènes

    InformationsquelleAutor booboos