1614341940
Load environment variables using import
statements.
$ npm install react-native-dotenv
Breaking changes: moving from v0.x
to v2.x
changes both the setup and usage of this package. Please see the migration guide.
Many have been asking about the reasons behind recent changes in this repo. Please see the story wiki page.
This babel plugin lets you inject your environment variables into your react-native environment using dotenv for multiple environments.
.babelrc
Basic setup:
{
"plugins": [
["module:react-native-dotenv"]
]
}
If the defaults do not cut it for your project, this outlines the available options for your Babel configuration and their respective default values, but you do not need to add them if you are using the default settings.
{
"plugins": [
["module:react-native-dotenv", {
"moduleName": "@env",
"path": ".env",
"blacklist": null,
"whitelist": null,
"safe": false,
"allowUndefined": true
}]
]
}
Note: for safe mode, it’s highly recommended to set allowUndefined
to false
.
.env
API_URL=https://api.example.org
API_TOKEN=abc123
In users.js
import {API_URL, API_TOKEN} from "@env"
fetch(`${API_URL}/users`, {
headers: {
'Authorization': `Bearer ${API_TOKEN}`
}
})
It is possible to limit the scope of env variables that will be imported by specifying a whitelist
and/or a blacklist
as an array of strings.
{
"plugins": [
["module:react-native-dotenv", {
"blacklist": [
"GITHUB_TOKEN"
]
}]
]
}
{
"plugins": [
["module:react-native-dotenv", {
"whitelist": [
"API_URL",
"API_TOKEN"
]
}]
]
}
Enable safe mode to only allow environment variables defined in the .env
file. This will completely ignore everything that is already defined in the environment.
The .env
file has to exist.
{
"plugins": [
["module:react-native-dotenv", {
"safe": true
}]
]
}
Allow importing undefined variables, their value will be undefined
.
{
"plugins": [
["module:react-native-dotenv", {
"allowUndefined": true
}]
]
}
import {UNDEFINED_VAR} from '@env'
console.log(UNDEFINED_VAR === undefined) // true
When set to false
, an error will be thrown. This is no longer default behavior.
This package now supports environment specific variables. This means you may now import environment variables from multiple files, i.e. .env
, .env.development
, .env.production
, and .env.test
.
Note: it is not recommended that you commit any sensitive information in .env
file to code in case your git repo is exposed. The best practice is to put a .env.template
or .env.development.template
that contains dummy values so other developers know what to configure. Then add your .env
and .env.development
to .gitignore
. You can also keep sensitive keys in a separate .env.local
(and respective .env.local.template
) in .gitignore
and you can use your other .env
files for non-sensitive config.
The base set of variables will be .env
and the environment-specific variables will overwrite them.
The variables will automatically be pulled from the appropriate environment and development
is the default. The choice of environment is based on your Babel environment first and if that value is not set, your NPM environment, which should actually be the same, but this makes it more robust.
In general, Release is production
and Debug is development
.
One thing that we’ve noticed is that metro overwrites the test environment variable even if you specify a config so we’ve added a way to fix this. Make sure to specify the config value as indicated in the wiki and make custom configs for alternative builds. However, if you still need this, such as for a staging / test environment, you can add the APP_ENV environment variable in the CLI. For example:
// package.json
{
"scripts": {
"start:staging": "APP_ENV=staging npx react-native start",
}
}
The above example would use the .env.staging
file. The standard word is test
, but go nuts.
npm install @types/react-native-dotenv
Set the moduleName
in your Babel config as react-native-dotenv
.
{
"plugins": [
["module:react-native-dotenv", {
"moduleName": "react-native-dotenv"
}]
]
}
Import your variables from react-native-dotenv
:
import {API_URL} from 'react-native-dotenv'
console.log(API_URL)
types
folder in your project*.d.ts
file, say, env.d.ts
declare module '@env' {
export const API_BASE: string;
}
Add all of your .env variables inside this module.
typeRoots
field in your tsconfig.json
file:{
...
"typeRoots": ["./src/types"],
...
}
When using with babel-loader
with caching enabled you will run into issues where environment changes won’t be picked up. This is due to the fact that babel-loader
computes a cacheIdentifier
that does not take your environment into account.
You can easily clear the cache:
rm -rf node_modules/.cache/babel-loader/*
or
yarn start --reset-cache
or
expo r -c
Maybe a solution for updating package.json scripts:
"cc": "rimraf node_modules/.cache/babel-loader/*,", "android": "npm run cc && react-native run-android", "ios": "npm run cc && react-native run-ios",
Or you can override the default cacheIdentifier
to include some of your environment variables.
The tests that use require('@env')
are also not passing.
If you’d like to become an active contributor, please send us a message.
╚⊙ ⊙╝
╚═(███)═╝
╚═(███)═╝
╚═(███)═╝
╚═(███)═╝
╚═(███)═╝
╚═(███)═╝
Author: goatandsheep
Source Code: https://github.com/goatandsheep/react-native-dotenv
#react-native #react #mobile-apps
1598839687
If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?
In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.
Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.
React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.
Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.
Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.
The popularity of React Native comes from its advantages. Some of its advantages are as follows:
Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.
React Native is very close to native. Consider the following aspects as described on the React Native website:
Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.
#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native
1656984600
今天,我继续分享我在 Native Module 和 C++ 方面的经验。
由于我们将看到很多为移动平台编写的 C/C++ 库,因此我们需要将它们实现到我们的 iOS 或 React Native 应用程序中。这就是为什么我想写一篇关于如何将一个函数从 C++ 导出到 React Native 的文章,它易于理解并且为初学者节省了时间。我将从一个新的 react native 应用程序开始
npx react-native init NativeModules
创建一个新的 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";
}
包装 C++ 文件并将它们导出到 IOS (swift) 端
一个。创建一个Objective C文件并命名Cpp_to_RN.m
重命名Cpp_to_RN.m
为 Cpp_to_RN.mm
湾。打开WrapCpp_to_RN.mm
文件并编写将包装sayHello
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。创建头文件并命名WrapCpp_to_RN.h
将函数导出wrapSayHello
到 Swift 文件
#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end
将 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"
调用 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 上的“运行”按钮,看看我们做了什么。
希望我的文章对您有所帮助,感谢您的阅读时间。
1656977400
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.
npx react-native init NativeModules
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.cpp
archivo y escribe una función simple “ sayHello()
”
#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
return "Hello from CPP";
}
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 sayHello
del 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 wrapSayHello
función al archivo Swift
#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end
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.h
archivo para nosotros.
Crear una clase SendCpp_to_RN
y 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"
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.
1656982800
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
npx react-native init NativeModules
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.cpp
arquivo e escreva uma função simples “ sayHello()
”
#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
return "Hello from CPP";
}
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 sayHello
do 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 wrapSayHello
função para o arquivo Swift
#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end
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.h
arquivo para nós.
Crie uma classe SendCpp_to_RN
e 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"
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.
1656981000
Hôm nay, tôi tiếp tục chia sẻ kinh nghiệm của mình với Native Module và C ++.
Vì chúng ta sẽ thấy rất nhiều thư viện C / C ++ viết cho nền tảng di động, chúng ta cần triển khai chúng cho ứng dụng iOS hoặc React Native của mình. Đó là lý do mình muốn viết một bài hướng dẫn cách export một hàm từ C ++ sang React Native dễ hiểu và tiết kiệm thời gian cho người mới bắt đầu. Tôi sẽ bắt đầu với một ứng dụng gốc phản ứng mới
npx react-native init NativeModules
Tạo một tệp C ++ mới và đặt tên cho nóCpp_to_RN.cpp
Khi chúng tôi tạo tệp C ++ mới, Xcode sẽ tạo tệp tiêu đề Cpp_to_RN.hpp
cho chúng tôi
Đầu tiên, mở tệp Cpp_to_RN.hpp
“” và tạo một lớp bao gồm một hàm không có phần thân.
#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 */
Sau đó, mở Cpp_to_RN.cpp
tệp và viết một hàm đơn giản “ sayHello()
”
#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
return "Hello from CPP";
}
Để bọc các tệp C ++ và xuất chúng sang phía IOS (nhanh chóng)
một. Tạo một tệp Objective C và đặt tên cho nóCpp_to_RN.m
Đổi tên Cpp_to_RN.m
thành Cpp_to_RN.mm
b. Mở WrapCpp_to_RN.mm
tệp và viết nội dung phần nội dung sẽ bọc hàm sayHello
từ tệp 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. Tạo một tệp tiêu đề và đặt tên cho nóWrapCpp_to_RN.h
Xuất wrapSayHello
hàm sang tệp Swift
#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end
Để xuất hàm C ++ sang React Native
một. Tạo một tệp Swift và đặt tên cho nóSendCpp_to_RN.swift
Lưu ý: Xcode sẽ yêu cầu chúng tôi tạo một NativeModules-Bridging-Header.h
tệp cho chúng tôi.
Tạo một lớp SendCpp_to_RN
và khai báo nó làNSObject
#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end
Viết một hàm requiresMainQueueSetup()
để ngăn cảnh báo khi chúng tôi chạy ứng dụng
#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end
Viết một hàm để bọc WrapCpp_to_RN()
từ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. Xuất một hàm bọc trong tệp Swift sang React Native
Tạo một tệp Objective C để xuất lớp Swift và chức năng của nó bằng cách sử dụngCallback
#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. Kết nối Swift với React Native, mở NativeModules-Bridging-Header.h
tệp
#import <React/RCTBridgeModule.h>#import <React/RCTViewManager.h>#import "WrapCpp_to_RN.h"
Gọi lớp Swift và các chức năng của nó
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;
Và chúng tôi đã hoàn tất, chỉ cần chạy ứng dụng
react-native run-ios
Hoặc chỉ cần nhấp vào nút “chạy” trên Xcode và xem những gì chúng tôi đã làm.
Tôi hy vọng bài viết của tôi hữu ích cho bạn, cảm ơn bạn đã dành thời gian đọc.