Reaccionar radio de borde nativo

Este artículo enseña cómo utilizar borderRadius en reaccionar nativo. Primero, revisaremos y comprenderemos un ejemplo de la propiedad borderRadius en React Native.

También aprenderemos cómo utilizar borderRadius en reaccionar nativo y redondear cualquier esquina de la caja.

Reaccionar radio de borde nativo

React Native proporciona el accesorio borderRadius para redondear todas las esquinas. El prop borderRadius solo acepta números entre 1 y 100; si pone más de 100, el resultado debería ser el mismo que el valor de 100.

Código de ejemplo:

import React from 'react';
import {StyleSheet, View} from 'react-native';

const App = () => {
  return (<View style = {styles.container}><View style = {
    styles.middle
  } />
    </View>);
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    padding: 20,
    margin: 10,
  },
  middle: {
    flex: 0.3,
    backgroundColor: '#01CDE8',
    borderWidth: 5,
    borderRadius: 10,
  },
});
export default App;

Si el borde redondeado está oculto, pruebe también con overflow: 'hidden'. El accesorio borderRadius se usa para crear una curva que se extiende desde las cuatro esquinas.

Sin embargo, para agregar una curvatura específica a una intersección dada, necesitamos otras propiedades únicas como borderTopRightRadius, borderTopLeftRadius, límite de borde de topStartRadius y TopEndRadius.

Sin embargo, el comportamiento de algunas propiedades es consistente, como borderTopLeftRadius y borderTopStartRadius, borderTopRightRadius y borderTopEndRadius. Como resultado, ambos apoyos son iguales.

Producción:

Todos sabemos que el accesorio borderRadius redondeará todas las esquinas, pero si desea redondear esquinas específicas, consulte las siguientes instrucciones:

1. TopStartRadius: cree un borde en la esquina superior izquierda.
2. TopEndRadius: cree un borde en la esquina superior derecha.
3. BottomStartRadius - Para crear la esquina inferior izquierda.
4. BottomEndRadius: para crear el borde de la esquina inferior derecha.

Ilustremos con un ejemplo a continuación:

import React from 'react';
import {StyleSheet, View} from 'react-native';

const App = () => {
  return (<View style = {styles.container}><View style = {
    styles.middle
  } />
    </View>);
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    padding: 20,
    margin: 10,
  },
  middle: {
    flex: 0.3,
    backgroundColor: '#01CDE8',
    borderWidth: 5,
    backfaceVisibility: 'hidden',
    borderTopStartRadius: 1,
    borderTopEndRadius: 20,
    borderBottomStartRadius: 20,
    borderBottomEndRadius: 1,
  },
});
export default App;

Producción:

Vamos a crear un tablero básico o una página de perfil para una aplicación de monitoreo personal o de rutina. Este ejemplo utilizará borderRadius para diseñar fotografías de perfil, tarjetas, botones, campos de entrada e iconos.

Código de ejemplo:

import {Image, StyleSheet} from 'react-native';

export default function App() {
  return (
    <Image
  style = {styles.profile} source = {
    {
      uri:
          'https://cdn.britannica.com/43/172743-138-545C299D/overview-Barack-Obama.jpg?w=800&h=450&c=crop',
    }
  } />
  );
}

const styles = StyleSheet.create({
  profile: {
    marginTop: 20,
    height: 100,
    width: 100,
    backgroundColor: "wheat",
    borderRadius: 50,
  },
});

Nuestro componente Imagen ahora tiene un borderRadius circular. Debería dar como resultado el siguiente resultado:

Tenga en cuenta que se usa ampliamente para decorar miniaturas para imágenes de perfil.