Accesorio de estilo React Native

En React Native, podemos diseñar nuestra aplicación usando JavaScript. Todos los componentes principales aceptan un estilo con nombre prop. Los nombres y valores de los estilos suelen coincidir con el funcionamiento de CSS en la web, excepto que los nombres se escriben con mayúsculas y minúsculas.

La propiedad de estilo puede ser un objeto JavaScript simple y antiguo. También podemos pasar una serie de estilos.

Sintaxis:

<component_tag style={styles.bigBlue}>...</component_tag>
OR
<component_tag style={[styles.bigBlue, styles.red]}>...</component_tag>

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto:

Ejemplo: ahora apliquemos estilo a cualquier texto o cualquier componente usando la propiedad de estilo. Aquí estableceremos el color de fondo verde para que el botón se centre.

import React from 'react';
import { StyleSheet,
        Text,
        View,
        Button,
        Alert
        } from 'react-native';
  
export default function App() {
  
// Alert function
const alert = ()=>{
    Alert.alert(
    "GeeksforGeeks",
    "A Computer Science Portal",
    [
        {
        text: "Cancel",
        },
        {
        text: "Agree",
        }
    ]
    );
}
  
return (
    <View style={styles.container}>
      <Button title={"Register"} onPress={alert}/>
    </View>
);
}
  
const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',
},
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/style