Comprender La Declaración !important De CSS

!importanten CSS es una notación especial que podemos aplicar a una declaración de CSS para anular otras reglas en conflicto para el selector coincidente.

Cuando trabajamos en proyectos web, es natural que tengamos algunas declaraciones de estilo que anulan otros estilos.

Este no es un problema para un desarrollador experimentado que comprende el mecanismo central de CSS. Sin embargo, puede ser difícil para los principiantes entender por qué el navegador no aplica las declaraciones de estilo que esperan.

Entonces, en lugar de enfocarse en resolver el problema de forma natural, tienden a buscar la solución rápida agregando la !importantdeclaración para hacer cumplir el estilo que esperan. Si bien este enfoque podría funcionar en ese momento, también puede iniciar otro problema complejo.

En esta guía, revisaremos lo siguiente, incluido cómo usarlo !importanty cuándo debemos usarlo:

El mecanismo central de CSS
Comprender la !importantdeclaración antes de usarla
:is()y otras funciones de pseudoclase relacionadas
¿Cuándo exactamente podemos usar la !importantdeclaración?
- Clases de utilidad
- Las reglas de estilo que no podemos anular

Suficiente dicho, vamos a sumergirnos.

El mecanismo central de CSS

Comprender los principios básicos de CSS naturalmente nos permitirá saber cuándo es obvio usar la !importantdeclaración. En esta sección, analizaremos algunos de estos mecanismos.

Considere el código HTML y CSS a continuación, ¿de qué color cree que será el texto del encabezado?

Primero, el HTML:

<h2 class="mytitle">This is heading text</h2>

Entonces, el CSS:

h2 {
  color: blue;
}
h2 {
  color: green;
}

¡El texto se volverá verde! Esto es CSS básico fundamental. Con el algoritmo de cascada de CSS , el orden de las reglas de CSS importa. En este caso, gana la última declaración en el código fuente.

Normalmente, esto es lógico. En primer lugar, no debemos repetir el mismo selector que hicimos anteriormente. CSS no quiere repetición, por lo que usa la última regla de declaración.

Sin embargo, hay casos en los que creamos estilos genéricos para los elementos raíz, como el h2, y luego agregamos clases para diseñar elementos específicos. Consideremos también el siguiente ejemplo, comenzando con el HTML:

<h2>This is heading text</h2>
<h2 class="mytitle">This is heading text</h2>

Entonces, veamos el CSS:

.mytitle {
  color: blue;
}
h2 {
  color: green;
}

En el código anterior, el primer h2elemento no tiene clase aplicada, por lo que es obvio que obtiene el color verde del h2selector.

Sin embargo, el segundo h2elemento usa la regla para el selector de clase .mytitle, incluso cuando la regla del selector de elementos viene en último lugar en el código CSS. La razón de esto es que el selector de clase tiene una mayor especificidad en comparación con el selector de elementos.

En otras palabras, el peso aplicado a la declaración en un selector de clase es mayor que el peso del selector de elementos.

De manera similar, la declaración en un selector de ID es más que la del selector de clase. En este caso, el color rojo en el siguiente código tiene prioridad:

<h2 id="maintitle" class="mytitle">This is heading text</h2>

Seguido por el CSS:

.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

Además, un styleatributo en línea tiene prioridad sobre el selector de ID, comenzando con el HTML:

<h2 id="maintitle" style="color: black;" class="mytitle">This is heading text</h2>

Luego seguido por el CSS:

.mytitle {/*...*/}

#maintitle {/*...*/}

h2 {/*...*/}

Este es el flujo de prioridad ideal en CSS y debe mantenerse para evitar anomalías. La !importantdeclaración la mayoría de las veces llega cuando nos olvidamos de estas reglas básicas.

El atributo de estilo en línea y cada uno de los selectores tienen valores que les asignan los navegadores. De esa manera, sabe cuál tiene mayor o menor prioridad. Piense en este valor como un número de cuatro dígitos individuales con el styleatributo asignado al valor de ponderación más fuerte de 1000.

Esto sigue al ID con un valor de 0100, luego a la clase con 0010, y finalmente al selector de elementos con 0001.

A veces podemos combinar selectores dirigidos a elementos específicos, como se ve en el siguiente ejemplo:

<h2 id="maintitle" class="mytitle">This is heading text</h2>

Seguido por el CSS:

h2.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

La especificidad del h2.mytitleselector en el CSS anterior es la adición de h2y .mytitle. Es decir, 0001 + 0010 = 0011. Este valor total, sin embargo, es menor que el del #maintitleID que es 0100.

Entonces, el navegador usa la declaración en el selector de ID para anular otras reglas en conflicto. En un caso de igual peso, gana la declaración de la última regla.

Ahora que sabemos qué reglas son las más relevantes y por qué el navegador las aplica, será obvio si usar o no esta !importantdeclaración.

Comprender la `!important`declaración antes de usarla

Antes de considerar el uso de la !importantnotación, debemos asegurarnos de que seguimos la regla de especificidad y usamos la cascada CSS.

En el siguiente código, tenemos los elementos h2y h3diseñados para ser un redcolor:

<h2 class="mytitle">This is heading II text</h2>
<h3 class="mytitle">This is heading III text</h3>

Luego, .mytitleen CSS:

.mytitle {
  color: red;
}

Pero digamos que en algún momento queremos darle un color al h3elemento . blueAgregar una regla de estilo como la siguiente no cambiaría el color porque la clase tiene más peso y es más específica que el selector de elementos, como hemos aprendido:

.mytitle {...}
h3 {
  color: blue;
}

Sin embargo, usar !importanton the lesserweight hace que el navegador aplique esa declaración sobre otras reglas en conflicto:

.mytitle {...}
h3 {
  color: blue !important;
}

Esto se debe a que la !importantnotación aumenta el peso de la declaración en el orden de precedencia en cascada. Lo que esto significa es que hemos interrumpido el flujo de prioridad normal. Por lo tanto, es una mala práctica y puede generar dificultades en el mantenimiento y la depuración del código.

Si en algún otro punto, queremos anular la regla importante anterior, podemos aplicar otra !importantnotación en una declaración con mayor especificidad (o lo mismo si está más abajo en la fuente). Entonces puede conducir a algo como esto:

h3 {
  color: blue !important;
}

/* several lines of rules */

.mytitle {
  color: green !important;
}

Esto es malo y debe evitarse. En su lugar, debemos comprobar si:

Reorganizar la regla o reescribir los selectores puede resolver el problema en cascada
El aumento de la especificidad del elemento de destino puede resolver el problema

Bueno, averigüémoslo. Volviendo a nuestras reglas de estilo, podemos imponer un bluecolor en el h3elemento aumentando la puntuación de especificidad.

Como se ve a continuación, podemos combinar selectores hasta que su puntaje de especificidad reemplace la regla en conflicto. El h3.mytitleselector otorga una puntuación de especificidad de 0011, que es mayor que la puntuación .mytitlede :0010

.mytitle {...}
h3.mytitle {
  color: blue;
}

Como podemos ver, en lugar de usar la !importantdeclaración para hacer cumplir una regla, nos enfocamos en aumentar el puntaje de especificidad.

`:is()`y otras funciones de pseudoclase relacionadas

A veces, podemos rastrear problemas hasta una función de pseudoclase. Entonces, saber cómo funciona puede ahorrarnos mucho estrés. Veamos otro ejemplo.

Imagina que estamos trabajando en un proyecto y vemos el siguiente código:

<h1 id="header">
  heading <span>span it</span>
  <a href="#">link it</a>
</h1>
<p class="paragraph">
  paragraph <span>span it</span>
  <a href="">link it</a>
</p>

El uso de las siguientes reglas CSS nos da el resultado después:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Ahora, digamos que queremos darle al spany al texto del enlace en el párrafo otro color de blue. Podemos hacer esto agregando la siguiente regla:

.paragraph span,
.paragraph a {
  color: blue;
}

La regla anterior anulará el bluecolor a pesar de estar más abajo en la línea:

Como una solución rápida, podemos hacer cumplir nuestro bluecolor usando la !importantnotación de esta manera:

:is(#header, p) span,
:is(#header, p) a {...}

.paragraph span,
.paragraph a {
  color: blue !important;
}

Pero, como puede suponer, esa es una mala práctica, por lo que no debemos apresurarnos a usar la !importantnotación. En cambio, podemos comenzar analizando cómo funciona cada selector. La :is()que se usa en el código es una función de pseudoclase para escribir megaselectores en una forma más comprimida.

Entonces, aquí está la siguiente regla en el código anterior:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Lo cual es equivalente a lo siguiente:

#header span,
p span,
#header a,
p a {
  color: red;
}

Entonces, ¿por qué .paragraph spany .paragraph ano anula el color a pesar de tener un puntaje de especificidad de 0011, que es más alto que 0002el de p spany p a.

Bueno, cada selector en :is()usa la especificidad más alta en la lista de argumentos. En ese caso, tanto the #headercomo the pin the :is(#header, p)usan la puntuación de especificidad de #header, que es 0100. Por lo tanto, el navegador mantiene su valor porque tiene una mayor especificidad.

Por lo tanto, cada vez que vemos este tipo de conflicto, es mejor no usar la función de pseudoclase y apegarnos a su equivalente como el siguiente:

#header span,
p span,
#header a,
p a {
  color: red;
}

Ahora, deberíamos poder ver el resultado esperado sin usar la !importantnotación que interrumpe el orden en cascada.

Puedes verlo por ti mismo en CodeSandbox .

¿Cuándo exactamente podemos usar la `!important`declaración?

A continuación se presentan algunas ocasiones en las !importantque se recomienda usar la notación.

Clases de utilidad

Suponiendo que queremos diseñar todos los botones de una página para que tengan el mismo aspecto, podemos escribir una regla CSS que se puede reutilizar en una página. Echemos un vistazo al siguiente marcado y estilo a continuación:

<p>Subscribe button : <a class="btn" href="#">Subscribe</a></p>

<section class="content">
  <p>
    This <a href="#" class="btn">button</a> style is affected by a higher
    specificity value .
  </p>
  A link here: <a href="#">Dont click</a>
</section>

Seguido por el CSS:

.btn {
  display: inline-block;
  background: #99f2f5;
  padding: 8px 10px;
  border: 1px solid #99f2f5;
  border-radius: 4px;
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.content a {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

En el código anterior, podemos ver que el enlace del botón dentro del sectionelemento está dirigido por ambos selectores en el CSS. Y aprendimos que para las reglas en conflicto, el navegador usará la regla más específica. Como esperábamos, .content atiene una puntuación de 0011while .btntiene una puntuación de 0010.

La página se verá así:

En este caso, podemos hacer cumplir la .btnregla agregando la !importantnotación a las declaraciones en conflicto como esta:

.btn {
  /* ... */
  color: black !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

La página ahora se ve como esperamos:

Compruébelo usted mismo en CodeSandbox .

Las reglas de estilo que no podemos anular

Esto sucede principalmente cuando no tenemos control total sobre el código de trabajo. A veces, cuando trabajamos con un sistema de administración de contenido como WordPress, podemos encontrar que un estilo CSS en línea en nuestro tema de WordPress anula nuestro estilo personalizado.

En este caso, la !importantdeclaración es útil para anular el estilo en línea del tema.

Conclusión

La !importantdeclaración nunca está destinada a ser utilizada como deseamos. Solo debemos usarlo si es absolutamente necesario, como una situación en la que tenemos menos control sobre el código o casos muy extremos en nuestro propio código.

Si lo usamos o no depende de cómo entendamos el mecanismo central de CSS, y en este tutorial también cubrimos eso.

Espero que hayas disfrutado leyendo esta publicación. Si tiene preguntas o contribuciones, comparta su opinión en la sección de comentarios y recuerde compartir este tutorial en la web.

Fuente: https://blog.logrocket.com/understanding-css-important-declaration/

#css

What is GEEK

Buddha Community

Comprender La Declaración !important De CSS

Gonzalo Almanza Segundo

1656977400

Cómo Exportar Una Función De C++ A React Native

Hoy sigo compartiendo mi experiencia con el Módulo Nativo y C++.

Dado que veremos muchas bibliotecas C/C++ escribiendo para las plataformas móviles, debemos implementarlas en nuestra aplicación iOS o React Native. Por eso quiero escribir un artículo sobre cómo exportar una función de C++ a React Native, que es fácil de entender y ahorra tiempo a los principiantes. Comenzaré con una nueva aplicación nativa de reacción.

1. Cree una nueva aplicación nativa de reacción, abra su terminal y ejecute

npx react-native init NativeModules

2. Abra Xcode y vaya a NativeModules/ios/NativeModule.xcworkspace

3. Trabajando en el lado de C++

Cree un nuevo archivo C++ y asígnele un nombreCpp_to_RN.cpp

Cuando creamos un nuevo archivo C++, Xcode creará un archivo de encabezado Cpp_to_RN.hpp para nosotros

Primero, abra el archivo " Cpp_to_RN.hpp" y cree una clase que incluya una función sin el cuerpo.

#ifndef Cpp_to_RN_hpp
#define Cpp_to_RN_hpp#include <stdio.h>
#include <string>class Cpp_to_RN {
public:
    std::string sayHello();
};#endif /* Cpp_to_RN_hpp */

Luego abre el Cpp_to_RN.cpparchivo y escribe una función simple “ sayHello()”

#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
    return "Hello from CPP";
}

4. Trabajando en el archivo Wrapping C++.

Para envolver los archivos C++ y exportarlos al lado IOS (swift)

una. Cree un archivo Objective C y asígnele un nombreCpp_to_RN.m

Renombrar el Cpp_to_RN.m a Cpp_to_RN.mm

b. Abra el WrapCpp_to_RN.mm archivo y escriba el contenido del cuerpo que envolverá la función sayHellodel archivo C++.

#import <Foundation/Foundation.h>
#import "WrapCpp_to_RN.h"
#import "Cpp_to_RN.hpp"@implementation WrapCpp_to_RN- (NSString *) sayHello {
  Cpp_to_RN fromCPP;
    std::string helloWorldMessage = fromCPP.sayHello();
    return [NSString
            stringWithCString:helloWorldMessage.c_str()
            encoding:NSUTF8StringEncoding];
}
@end

C. Cree un archivo de encabezado y asígnele un nombreWrapCpp_to_RN.h

Exportar la wrapSayHellofunción al archivo Swift

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

5. Trabajando en el lado de iOS (Swift)

Para exportar la función C++ a React Native

una. Cree un archivo Swift y asígnele un nombreSendCpp_to_RN.swift

Nota: Xcode nos pedirá que creemos un NativeModules-Bridging-Header.harchivo para nosotros.

Crear una clase SendCpp_to_RNy declararla comoNSObject

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

Escribir una función requiresMainQueueSetup()para evitar advertencias cuando ejecutamos la aplicación.

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

Escriba una función para envolver el WrapCpp_to_RN()fromWrapCpp_to_RN.mm

import Foundation@objc(SendCpp_to_RN)
class SendCpp_to_RN : NSObject {
    
  @objc static func requiresMainQueueSetup() -> Bool {
        return false
    }
  
  @objc func fromCpp(_ successCallback: RCTResponseSenderBlock) -> Void {
    successCallback([NSNull(), WrapCpp_to_RN().wrapSayHello() as Any])
    }}

b. Exporte una función de ajuste en un archivo Swift a React Native

Cree un archivo Objective C para exportar la clase Swift y su función usandoCallback

#import <React/RCTBridgeModule.h>
#import <Foundation/Foundation.h>
#import "UIKit/UIKit.h"
@interface RCT_EXTERN_MODULE(SendCpp_to_RN, NSObject)RCT_EXTERN_METHOD(fromCpp:(RCTResponseSenderBlock)successCallback)@end

C. Conecte Swift a React Native, abra el NativeModules-Bridging-Header.h archivo

#import <React/RCTBridgeModule.h>#import <React/RCTViewManager.h>#import "WrapCpp_to_RN.h"

6. Trabajando en el lado de React Native

Llame a la clase Swift y sus funciones

import React from 'react';
import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';const App = () => {
  const onPress = () => {
    const {SendCpp_to_RN} = NativeModules;
    SendCpp_to_RN.fromCpp((_err, res) => console.log(res));
  };
  return (
    <View style={styles.container}>
      <Text> Practice !</Text>
      <Button title="C++ to React Native" color="#841584" onPress={onPress} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default App;

Y listo, solo ejecuta la aplicación

react-native run-ios

O simplemente haga clic en el botón "ejecutar" en Xcode y vea lo que hemos hecho.

Espero que mi artículo te sea útil, gracias por tu tiempo de lectura.

Fuente: https://betterprogramming.pub/native-modules-export-c-function-to-react-native-for-beginners-77e89934b210

#cpp #cplusplus #react

Constança Melo Antunes

1656982800

Como Exportar Uma Função De C++ Para React Native

Hoje, continuo compartilhando minha experiência com o Módulo Nativo e C++.

Como veremos muitas bibliotecas C/C++ escrevendo para plataformas móveis, precisamos implementá-las em nosso aplicativo iOS ou React Native. É por isso que quero escrever um artigo sobre como exportar uma função de C++ para React Native, que é fácil de entender e economiza tempo para iniciantes. Vou começar com um novo aplicativo nativo de reação

1. Crie um novo aplicativo nativo de reação, abra seu terminal e execute

npx react-native init NativeModules

2. Abra o Xcode e navegue até NativeModules/ios/NativeModule.xcworkspace

3. Trabalhando no lado C++

Crie um novo arquivo C++ e nomeie-oCpp_to_RN.cpp

Quando criamos um novo arquivo C++, o Xcode criará um arquivo de cabeçalho Cpp_to_RN.hpp para nós

Primeiro, abra o arquivo “ Cpp_to_RN.hpp” e crie uma classe que inclua uma função sem o corpo.

#ifndef Cpp_to_RN_hpp
#define Cpp_to_RN_hpp#include <stdio.h>
#include <string>class Cpp_to_RN {
public:
    std::string sayHello();
};#endif /* Cpp_to_RN_hpp */

Em seguida, abra o Cpp_to_RN.cpparquivo e escreva uma função simples “ sayHello()”

#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
    return "Hello from CPP";
}

4. Trabalhando no arquivo C++ de encapsulamento.

Para encapsular os arquivos C++ e exportá-los para o lado IOS (swift)

uma. Crie um arquivo Objective C e nomeie-oCpp_to_RN.m

Renomeie o Cpp_to_RN.m para Cpp_to_RN.mm

b. Abra o WrapCpp_to_RN.mm arquivo e escreva o conteúdo do corpo que envolverá a função sayHellodo arquivo C++.

#import <Foundation/Foundation.h>
#import "WrapCpp_to_RN.h"
#import "Cpp_to_RN.hpp"@implementation WrapCpp_to_RN- (NSString *) sayHello {
  Cpp_to_RN fromCPP;
    std::string helloWorldMessage = fromCPP.sayHello();
    return [NSString
            stringWithCString:helloWorldMessage.c_str()
            encoding:NSUTF8StringEncoding];
}
@end

c. Crie um arquivo de cabeçalho e nomeie-oWrapCpp_to_RN.h

Exporte a wrapSayHellofunção para o arquivo Swift

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

5. Trabalhando no lado iOS (Swift)

Para exportar a função C++ para React Native

uma. Crie um arquivo Swift e nomeie-oSendCpp_to_RN.swift

Observação: o Xcode nos pedirá para criar um NativeModules-Bridging-Header.harquivo para nós.

Crie uma classe SendCpp_to_RNe declare-a comoNSObject

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

Escreva uma função requiresMainQueueSetup()para evitar avisos quando executamos o aplicativo

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

Escreva uma função para envolver o WrapCpp_to_RN()fromWrapCpp_to_RN.mm

import Foundation@objc(SendCpp_to_RN)
class SendCpp_to_RN : NSObject {
    
  @objc static func requiresMainQueueSetup() -> Bool {
        return false
    }
  
  @objc func fromCpp(_ successCallback: RCTResponseSenderBlock) -> Void {
    successCallback([NSNull(), WrapCpp_to_RN().wrapSayHello() as Any])
    }}

b. Exporte uma função wrap no arquivo Swift para React Native

Crie um arquivo Objective C para exportar a classe Swift e sua função usandoCallback

#import <React/RCTBridgeModule.h>
#import <Foundation/Foundation.h>
#import "UIKit/UIKit.h"
@interface RCT_EXTERN_MODULE(SendCpp_to_RN, NSObject)RCT_EXTERN_METHOD(fromCpp:(RCTResponseSenderBlock)successCallback)@end

c. Conecte o Swift ao React Native, abra o NativeModules-Bridging-Header.h arquivo

#import <React/RCTBridgeModule.h>#import <React/RCTViewManager.h>#import "WrapCpp_to_RN.h"

6. Trabalhando no lado React Native

Chame a classe Swift e suas funções

import React from 'react';
import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';const App = () => {
  const onPress = () => {
    const {SendCpp_to_RN} = NativeModules;
    SendCpp_to_RN.fromCpp((_err, res) => console.log(res));
  };
  return (
    <View style={styles.container}>
      <Text> Practice !</Text>
      <Button title="C++ to React Native" color="#841584" onPress={onPress} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default App;

E pronto, basta executar o aplicativo

react-native run-ios

Ou apenas clique no botão “executar” no Xcode e veja o que fizemos.

Espero que meu artigo seja útil para você, obrigado pelo tempo de leitura.

Fonte: https://betterprogramming.pub/native-modules-export-c-function-to-react-native-for-beginners-77e89934b210

#cpp #cplusplus #react

Léon Peltier

1656979200

Comment Exporter Une Fonction De C++ Vers React Native

Aujourd'hui, je continue à partager mon expérience avec le module natif et C++.

Comme nous verrons beaucoup de bibliothèques C/C++ écrire pour les plates-formes mobiles, nous devons les implémenter dans notre application iOS ou React Native. C'est pourquoi je souhaite écrire un article sur la façon d'exporter une fonction de C++ vers React Native, ce qui est facile à comprendre et fait gagner du temps aux débutants. Je vais commencer avec une nouvelle application native réactive

1. Créez une nouvelle application native React, ouvrez votre terminal et exécutez

npx react-native init NativeModules

2. Ouvrez Xcode et accédez à NativeModules/ios/NativeModule.xcworkspace

3. Travailler du côté C++

Créez un nouveau fichier C++ et nommez-leCpp_to_RN.cpp

Lorsque nous créons un nouveau fichier C++, Xcode créera un fichier d'en-tête Cpp_to_RN.hpp pour nous

Tout d'abord, ouvrez le fichier " Cpp_to_RN.hpp" et créez une classe qui inclut une fonction sans le corps.

#ifndef Cpp_to_RN_hpp
#define Cpp_to_RN_hpp#include <stdio.h>
#include <string>class Cpp_to_RN {
public:
    std::string sayHello();
};#endif /* Cpp_to_RN_hpp */

Ouvrez ensuite le Cpp_to_RN.cppfichier et écrivez une fonction simple " sayHello()"

#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
    return "Hello from CPP";
}

4. Travail sur l'encapsulation du fichier C++.

Pour envelopper les fichiers C++ et les exporter vers le côté IOS (swift)

un. Créez un fichier Objective C et nommez-leCpp_to_RN.m

Renommez le Cpp_to_RN.m en Cpp_to_RN.mm

b. Ouvrez le WrapCpp_to_RN.mm fichier et écrivez le contenu du corps qui encapsulera la fonction sayHelloà partir du fichier C++.

#import <Foundation/Foundation.h>
#import "WrapCpp_to_RN.h"
#import "Cpp_to_RN.hpp"@implementation WrapCpp_to_RN- (NSString *) sayHello {
  Cpp_to_RN fromCPP;
    std::string helloWorldMessage = fromCPP.sayHello();
    return [NSString
            stringWithCString:helloWorldMessage.c_str()
            encoding:NSUTF8StringEncoding];
}
@end

c. Créez un fichier d'en-tête et nommez-leWrapCpp_to_RN.h

Exporter la wrapSayHellofonction vers le fichier Swift

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

5. Travailler du côté iOS (Swift)

Pour exporter la fonction C++ vers React Native

un. Créez un fichier Swift et nommez-leSendCpp_to_RN.swift

Remarque : Xcode nous demandera de créer un NativeModules-Bridging-Header.hfichier pour nous.

Créez une classe SendCpp_to_RNet déclarez-la commeNSObject

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

Écrire une fonction requiresMainQueueSetup()pour empêcher l'avertissement lorsque nous exécutons l'application

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

Ecrire une fonction pour envelopper le WrapCpp_to_RN()fromWrapCpp_to_RN.mm

import Foundation@objc(SendCpp_to_RN)
class SendCpp_to_RN : NSObject {
    
  @objc static func requiresMainQueueSetup() -> Bool {
        return false
    }
  
  @objc func fromCpp(_ successCallback: RCTResponseSenderBlock) -> Void {
    successCallback([NSNull(), WrapCpp_to_RN().wrapSayHello() as Any])
    }}

b. Exporter une fonction wrap dans un fichier Swift vers React Native

Créez un fichier Objective C pour exporter la classe Swift et sa fonction à l'aide deCallback

#import <React/RCTBridgeModule.h>
#import <Foundation/Foundation.h>
#import "UIKit/UIKit.h"
@interface RCT_EXTERN_MODULE(SendCpp_to_RN, NSObject)RCT_EXTERN_METHOD(fromCpp:(RCTResponseSenderBlock)successCallback)@end

c. Connectez Swift à React Native, ouvrez le NativeModules-Bridging-Header.h fichier

#import <React/RCTBridgeModule.h>#import <React/RCTViewManager.h>#import "WrapCpp_to_RN.h"

6. Travailler du côté React Native

Appelez la classe Swift et ses fonctions

import React from 'react';
import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';const App = () => {
  const onPress = () => {
    const {SendCpp_to_RN} = NativeModules;
    SendCpp_to_RN.fromCpp((_err, res) => console.log(res));
  };
  return (
    <View style={styles.container}>
      <Text> Practice !</Text>
      <Button title="C++ to React Native" color="#841584" onPress={onPress} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default App;

Et nous avons terminé, il suffit de lancer l'application

react-native run-ios

Ou cliquez simplement sur le bouton "exécuter" sur Xcode et voyez ce que nous avons fait.

J'espère que mon article vous sera utile, merci pour le temps de lecture.

Source : https://betterprogramming.pub/native-modules-export-c-function-to-react-native-for-beginners-77e89934b210

#cpp #cplusplus #react

坂本篤司

1656981060

関数をC++からReactNativeにエクスポートする方法

今日も、ネイティブモジュールとC++での経験を共有し続けています。

多くのC/C ++ライブラリがモバイルプラットフォーム用に作成されているので、それらをiOSまたはReactNativeアプリケーションに実装する必要があります。そのため、関数をC++からReactNativeにエクスポートする方法についての記事を書きたいと思います。これは、理解しやすく、初心者の時間を節約できます。新しいreactネイティブアプリケーションから始めます

1.新しいreactネイティブアプリを作成し、ターミナルを開いて実行します

npx react-native init NativeModules

2. Xcodeを開き、NativeModules / ios/NativeModule.xcworkspaceに移動します

3.C++側での作業

新しいC++ファイルを作成し、名前を付けますCpp_to_RN.cpp

新しいC++ファイルを作成すると、XcodeはヘッダーファイルCpp_to_RN.hpp を作成します

まず、「Cpp_to_RN.hpp」ファイルを開き、本体のない関数を含むクラスを作成します。

#ifndef Cpp_to_RN_hpp
#define Cpp_to_RN_hpp#include <stdio.h>
#include <string>class Cpp_to_RN {
public:
    std::string sayHello();
};#endif /* Cpp_to_RN_hpp */

次に、ファイルを開いてCpp_to_RN.cpp、単純な関数「sayHello()」を記述します。

#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
    return "Hello from CPP";
}

4.C++ファイルのラッピングに取り組んでいます。

C ++ファイルをラップしてIOS（swift）側にエクスポートするには

a。ObjectiveCファイルを作成して名前を付けますCpp_to_RN.m

名前をに変更Cpp_to_RN.m します Cpp_to_RN.mm

b。ファイルを開き、C++ファイルからWrapCpp_to_RN.mm 関数をラップする本文のコンテンツを記述します。sayHello

#import <Foundation/Foundation.h>
#import "WrapCpp_to_RN.h"
#import "Cpp_to_RN.hpp"@implementation WrapCpp_to_RN- (NSString *) sayHello {
  Cpp_to_RN fromCPP;
    std::string helloWorldMessage = fromCPP.sayHello();
    return [NSString
            stringWithCString:helloWorldMessage.c_str()
            encoding:NSUTF8StringEncoding];
}
@end

c。ヘッダーファイルを作成し、名前を付けますWrapCpp_to_RN.h

wrapSayHello関数をSwiftファイルにエクスポートします

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

5. iOS（Swift）側での作業

C++関数をReactNativeにエクスポートするには

a。Swiftファイルを作成し、名前を付けますSendCpp_to_RN.swift

注：Xcodeは、NativeModules-Bridging-Header.hファイルを作成するように要求します。

クラスSendCpp_to_RNを作成し、次のように宣言しますNSObject

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

requiresMainQueueSetup()アプリケーション実行時の警告を防ぐ関数を作成する

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

WrapCpp_to_RN()fromをラップする関数を記述しますWrapCpp_to_RN.mm

import Foundation@objc(SendCpp_to_RN)
class SendCpp_to_RN : NSObject {
    
  @objc static func requiresMainQueueSetup() -> Bool {
        return false
    }
  
  @objc func fromCpp(_ successCallback: RCTResponseSenderBlock) -> Void {
    successCallback([NSNull(), WrapCpp_to_RN().wrapSayHello() as Any])
    }}

b。Swiftファイルのラップ関数をReactNativeにエクスポートします

を使用してSwiftクラスとその関数をエクスポートするObjectiveCファイルを作成しますCallback

#import <React/RCTBridgeModule.h>
#import <Foundation/Foundation.h>
#import "UIKit/UIKit.h"
@interface RCT_EXTERN_MODULE(SendCpp_to_RN, NSObject)RCT_EXTERN_METHOD(fromCpp:(RCTResponseSenderBlock)successCallback)@end

c。SwiftをReactNativeに接続し、NativeModules-Bridging-Header.h ファイルを開きます

#import <React/RCTBridgeModule.h>#import <React/RCTViewManager.h>#import "WrapCpp_to_RN.h"

6.ReactNative側での作業

Swiftクラスとその関数を呼び出す

import React from 'react';
import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';const App = () => {
  const onPress = () => {
    const {SendCpp_to_RN} = NativeModules;
    SendCpp_to_RN.fromCpp((_err, res) => console.log(res));
  };
  return (
    <View style={styles.container}>
      <Text> Practice !</Text>
      <Button title="C++ to React Native" color="#841584" onPress={onPress} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default App;

これで完了です。アプリケーションを実行するだけです。

react-native run-ios

または、Xcodeの「実行」ボタンをクリックして、実行内容を確認してください。

私の記事がお役に立てば幸いです。お読みいただきありがとうございます。

ソース：https ：//betterprogramming.pub/native-modules-export-c-function-to-react-native-for-beginners-77e89934b210

#cpp #cplusplus #react

黎飞

1656984600

如何将函数从 C++ 导出到 React Native

今天，我继续分享我在 Native Module 和 C++ 方面的经验。

由于我们将看到很多为移动平台编写的 C/C++ 库，因此我们需要将它们实现到我们的 iOS 或 React Native 应用程序中。这就是为什么我想写一篇关于如何将一个函数从 C++ 导出到 React Native 的文章，它易于理解并且为初学者节省了时间。我将从一个新的 react native 应用程序开始

1.新建一个react native app，打开你的终端运行

npx react-native init NativeModules

2. 打开 Xcode 并导航到 NativeModules/ios/NativeModule.xcworkspace

3. 在 C++ 端工作

创建一个新的 C++ 文件并命名Cpp_to_RN.cpp

当我们创建一个新的 C++ 文件时，Xcode 会Cpp_to_RN.hpp 为我们创建一个头文件

首先，打开“ Cpp_to_RN.hpp”文件，并创建一个包含没有主体的函数的类。

#ifndef Cpp_to_RN_hpp
#define Cpp_to_RN_hpp#include <stdio.h>
#include <string>class Cpp_to_RN {
public:
    std::string sayHello();
};#endif /* Cpp_to_RN_hpp */

然后打开Cpp_to_RN.cpp文件，写一个简单的函数“ sayHello()”

#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
    return "Hello from CPP";
}

4. 处理包装 C++ 文件。

包装 C++ 文件并将它们导出到 IOS (swift) 端

一个。创建一个Objective C文件并命名Cpp_to_RN.m

重命名Cpp_to_RN.m 为 Cpp_to_RN.mm

湾。打开WrapCpp_to_RN.mm 文件并编写将包装sayHelloC++ 文件中的函数的正文内容。

#import <Foundation/Foundation.h>
#import "WrapCpp_to_RN.h"
#import "Cpp_to_RN.hpp"@implementation WrapCpp_to_RN- (NSString *) sayHello {
  Cpp_to_RN fromCPP;
    std::string helloWorldMessage = fromCPP.sayHello();
    return [NSString
            stringWithCString:helloWorldMessage.c_str()
            encoding:NSUTF8StringEncoding];
}
@end

C。创建头文件并命名WrapCpp_to_RN.h

将函数导出wrapSayHello到 Swift 文件

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

5. 在 iOS (Swift) 端工作

将 C++ 函数导出到 React Native

一个。创建一个 Swift 文件并命名SendCpp_to_RN.swift

注意：Xcode 会要求我们为我们创建一个NativeModules-Bridging-Header.h文件。

创建一个类SendCpp_to_RN并将其声明为NSObject

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

编写一个函数requiresMainQueueSetup()来防止我们运行应用程序时出现警告

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

编写一个函数来包装WrapCpp_to_RN()fromWrapCpp_to_RN.mm

import Foundation@objc(SendCpp_to_RN)
class SendCpp_to_RN : NSObject {
    
  @objc static func requiresMainQueueSetup() -> Bool {
        return false
    }
  
  @objc func fromCpp(_ successCallback: RCTResponseSenderBlock) -> Void {
    successCallback([NSNull(), WrapCpp_to_RN().wrapSayHello() as Any])
    }}

湾。将 Swift 文件中的包装函数导出到 React Native

创建一个 Objective C 文件以导出 Swift 类及其函数，使用Callback

#import <React/RCTBridgeModule.h>
#import <Foundation/Foundation.h>
#import "UIKit/UIKit.h"
@interface RCT_EXTERN_MODULE(SendCpp_to_RN, NSObject)RCT_EXTERN_METHOD(fromCpp:(RCTResponseSenderBlock)successCallback)@end

C。将 Swift 连接到 React Native，打开NativeModules-Bridging-Header.h 文件

#import <React/RCTBridgeModule.h>#import <React/RCTViewManager.h>#import "WrapCpp_to_RN.h"

6. 在 React Native 方面工作

调用 Swift 类及其函数

import React from 'react';
import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';const App = () => {
  const onPress = () => {
    const {SendCpp_to_RN} = NativeModules;
    SendCpp_to_RN.fromCpp((_err, res) => console.log(res));
  };
  return (
    <View style={styles.container}>
      <Text> Practice !</Text>
      <Button title="C++ to React Native" color="#841584" onPress={onPress} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default App;

我们完成了，只需运行应用程序

react-native run-ios

或者只需单击 Xcode 上的“运行”按钮，看看我们做了什么。

希望我的文章对您有所帮助，感谢您的阅读时间。

来源：https ://betterprogramming.pub/native-modules-export-c-function-to-react-native-for-beginners-77e89934b210

#cpp #cplusplus #react

Comprender La Declaración !important De CSS

El mecanismo central de CSS

Comprender la !importantdeclaración antes de usarla

:is()y otras funciones de pseudoclase relacionadas

¿Cuándo exactamente podemos usar la !importantdeclaración?

Clases de utilidad

Las reglas de estilo que no podemos anular

Conclusión

What is GEEK

Buddha Community

Cómo Exportar Una Función De C++ A React Native

1. Cree una nueva aplicación nativa de reacción, abra su terminal y ejecute

2. Abra Xcode y vaya a NativeModules/ios/NativeModule.xcworkspace

3. Trabajando en el lado de C++

4. Trabajando en el archivo Wrapping C++.

5. Trabajando en el lado de iOS (Swift)

6. Trabajando en el lado de React Native

Como Exportar Uma Função De C++ Para React Native

1. Crie um novo aplicativo nativo de reação, abra seu terminal e execute

2. Abra o Xcode e navegue até NativeModules/ios/NativeModule.xcworkspace

3. Trabalhando no lado C++

4. Trabalhando no arquivo C++ de encapsulamento.

5. Trabalhando no lado iOS (Swift)

6. Trabalhando no lado React Native

Comment Exporter Une Fonction De C++ Vers React Native

1. Créez une nouvelle application native React, ouvrez votre terminal et exécutez

2. Ouvrez Xcode et accédez à NativeModules/ios/NativeModule.xcworkspace

3. Travailler du côté C++

4. Travail sur l'encapsulation du fichier C++.

5. Travailler du côté iOS (Swift)

6. Travailler du côté React Native

関数をC++からReactNativeにエクスポートする方法

1.新しいreactネイティブアプリを作成し、ターミナルを開いて実行します

2. Xcodeを開き、NativeModules / ios/NativeModule.xcworkspaceに移動します

3.C++側での作業

4.C++ファイルのラッピングに取り組んでいます。

5. iOS（Swift）側での作業

6.ReactNative側での作業

如何将函数从 C++ 导出到 React Native

1.新建一个react native app，打开你的终端运行

2. 打开 Xcode 并导航到 NativeModules/ios/NativeModule.xcworkspace

3. 在 C++ 端工作

4. 处理包装 C++ 文件。

5. 在 iOS (Swift) 端工作

6. 在 React Native 方面工作

Comprender la `!important`declaración antes de usarla

`:is()`y otras funciones de pseudoclase relacionadas

¿Cuándo exactamente podemos usar la `!important`declaración?