Establecer el color del borde en React-Native

1. Establezca el color del borde usando StyleSheet en React-Native
2. Establezca el color del borde usando el accesorio de estilo en React-Native

Este artículo nos enseñará a configurar y usar el color del borde en una aplicación nativa de reacción. El borde es la capa exterior de un elemento que se puede personalizar con diferentes anchos y colores de borde.

Incluso podemos establecer los colores para los cuatro lados de un elemento. El react-native usa el componente Texto para mostrar cualquier texto en la aplicación.

Este artículo utilizará react-native para desarrollar el borde y el color del borde de un elemento de texto. Existen diferentes formas de establecer el color del borde en el react-native; discutiremos las formas más populares para el mismo.

Establezca el color del borde usando StyleSheet en React-Native

El StyleSheet debe importarse del paquete react-native. Se utiliza para crear estilos para diferentes elementos nativos de reacción.

Utilizándolo, podemos crear nuestros estilos personalizados y agregarlos en consecuencia a nuestra aplicación.

Sintaxis de la StyleSheet:

const styles = StyleSheet.create({
  style1: {
    // Put your style here
    // For example:
    backgroundColor: '#ffffff',
    color: '#000000'
  },
  style2: {
    // Put your style here
    // For example:
    width: '100%',
  },
});

Después de declarar el StyleSheet en nuestra aplicación nativa de reacción, necesitamos crear un estilo con las propiedades border y border-color y usarlo en un Texto.

En el siguiente ejemplo, usamos la Hoja de estilo de react-native para establecer el color del borde de un componente Texto. En primer lugar, importamos el StyleSheet y creamos múltiples estilos llamados redBorder, blueBorder y greenBorder.

Cada estilo contiene algún estilo, como borderWidth y borderColor. Luego, creamos tres componentes de Texto diferentes y pusimos nuestros estilos creados en ellos.

Finalmente, se agregan el relleno y los márgenes solo para una mejor visualización.

import { StyleSheet, Text, View } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.redBorder}>It has red border color</Text>
      <Text style={styles.blueBorder}>It has blue border color</Text>
      <Text style={styles.greenBorder}>It has green border color</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  redBorder: {
    borderWidth: 1,
    borderColor: 'red',
    padding: 10,
    margin: 5
  },
  blueBorder: {
    borderWidth: 1,
    borderColor: 'blue',
    padding: 10,
    margin: 5
  },
  greenBorder: {
    borderWidth: 1,
    borderColor: 'green',
    padding: 10,
    margin: 5
  }
});

Producción:

En el resultado anterior, los usuarios pueden ver tres textos con tres colores de borde: rojo, azul y verde.

Establezca el color del borde usando el accesorio de estilo en React-Native

El estilo prop se usa para establecer estilos para diferentes elementos de react-native. Toma un objeto que contiene los estilos que el usuario quiere aplicar en el componente.

Por ejemplo, para especificar el color del borde usando el estilo prop, debemos proporcionar el valor estilo prop que contiene el color de borde deseado y el ancho del borde.

En el siguiente ejemplo, usamos el estilo prop del componente Texto de react-native para establecer el color del borde de ese componente. En primer lugar, necesitamos crear los componentes de Texto, por lo que hemos creado dos componentes de Texto en este ejemplo.

Cada componente usa el estilo prop, y en el estilo prop, definimos el borderWidth que debe configurarse y el borderColor. El relleno y el margen se utilizan para visualizar mejor el contenido.

import { StyleSheet, Text, View } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{ borderWidth: 2, borderColor: 'yellow', padding: 10, margin: 5 }}>Yellow border color with style prop</Text>
      <Text style={{ borderWidth: 2, borderColor: 'purple', padding: 10, margin: 5 }}>Purple border color with style prop</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Producción:

En la salida anterior, los usuarios pueden ver dos textos con dos colores de borde diferentes, amarillo y morado, configurados por el estilo prop.

Este artículo nos enseñó a establecer diferentes colores de borde en react-native. Además de estos métodos discutidos en este artículo, hay muchas otras formas de establecer el color del borde, pero estas son las formas más fáciles y populares de colorear el borde de cualquier componente.