Los fundamentos de las hojas de estilo de React Native

En React Native, si queremos usar elementos de componentes para la configuración de estilo, necesitamos usar StyleSheetcomponentes para formular estilos. useColorSchemeEs para definir el tema de color para la aplicación. En esta nota, solo lo presentamos brevemente y lo usamos.

Usar StyleSheetestilos definidos

Cuando queramos usarlo StyleSheet, necesitamos importar el módulo correspondiente y usar createpalabras clave para crear objetos de estilo. El método de diseño en React Native es solo Flexel método de diseño, y el método de diseño Flex es consistente con el método de diseño Flex en CSS3.

Ya hemos escrito un Hello Worldprograma en las notas del primer capítulo, podemos agregar estilos sobre esta base, el código específico es el siguiente:

<View style={
    
    style.container}>
  <Text>Hello World !</Text>
</View>

const style = StyleSheet.create({
    
    
  container: {
    
    
    display: "flex",
    flex: 1,
    justifyContent: "center",
  },
});

Nota: SafeAreaViewlos elementos dentro de las etiquetas no se pueden diseñar, esto provocará errores.

combinación de colores useColorScheme

useColorSchemeEs un Hook especialmente utilizado para la actualización de esquemas de color. El valor devuelto representa el esquema de color preferido del usuario actual. Los ejemplos específicos son los siguientes:

import React from "react";
import {
    
     Text, View, StyleSheet, useColorScheme } from "react-native";

const App: React.FC = () => {
    
    
  const colorScheme = useColorScheme() === "dark";

  return (
    <View style={
    
    style.container}>
      <Text style={
    
    colorScheme ? style.whiteText : style.blackText}>
        Hello World !
      </Text>
    </View>
  );
};

const style = StyleSheet.create({
    
    
  container: {
    
    
    display: "flex",
    flex: 1,
    justifyContent: "center",
  },
  whiteText: {
    
    
    color: "#FFFFFF",
  },
  blackText: {
    
    
    color: "#000000",
  },
});

export default App;