React Native 原生开发指南

🕗 发布于 2024-11-28 17:55 react native react.js javascript

写在前面

React Native (RN) 是一个用于构建跨平台移动应用的框架。它允许开发者使用 JavaScript 和 React 来编写应用程序，并将其转换为原生代码。虽然 RN 提供了许多内置的组件和 API，但有时候你可能需要访问原生平台的特定功能或性能优化。为此，RN 提供了多种方式来桥接原生平台能力，包括使用 Turbo 模块、C++ 实现跨平台的原生模块、自定义 C++ 类型和 Fabric 原生 UI 组件。

本文将详细介绍这些方法，并提供一些示例代码和实践建议。

桥接原生平台能力

RN 的核心思想是将 JavaScript 代码转换为原生代码。然而，并不是所有的原生功能都可以直接在 JavaScript 中使用。为了解决这个问题，RN 提供了一个桥接机制，允许你在 JavaScript 和原生代码之间传递数据和调用方法。

Native Module

Native Module 是 RN 中最基本的桥接方式。它允许你在原生平台上编写代码，并将其暴露给 JavaScript。要创建一个 Native Module，你需要在原生平台上编写相应的代码，并在 JavaScript 中使用 NativeModules API 来访问它。

以下是一个简单的示例，演示如何在 iOS 平台上创建一个 Native Module，并在 JavaScript 中使用它：

Objective-C

// MyNativeModule.h
#import <React/RCTBridgeModule.h>

@interface MyNativeModule : NSObject <RCTBridgeModule>

@end

// MyNativeModule.m
#import "MyNativeModule.h"

@implementation MyNativeModule

RCT_EXPORT_MODULE();

- (dispatch_block_t)sayHello:(NSString *)name callback:(RCTResponseSenderBlock)callback {
  NSLog(@"Hello, %@", name);
  callback(@[@"Hello, ", name]);
  return ^{
    NSLog(@"Goodbye, %@", name);
  };
}

@end

在这个示例中，我们定义了一个名为 MyNativeModule 的 Native Module，它有一个名为 sayHello 的方法，接受一个字符串参数 name，并在控制台中打印出一条欢迎消息。同时，它还返回一个闭包，用于在调用结束后打印出一条再见消息。

JavaScript

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.sayHello('John', (result) => {
  console.log(result); // 输出：["Hello, ", "John"]
});

在这个示例中，我们首先导入了 NativeModules API。然后，我们使用 MyNativeModule 对象来调用 sayHello 方法，并传递一个字符串参数 name 和一个回调函数。回调函数将接收到一个数组作为参数，包含了欢迎消息的前缀和 name 的值。

Native UI Component

除了 Native Module，RN 还支持 Native UI Component。Native UI Component 允许你在原生平台上编写自定义的 UI 组件，并将其嵌入到 RN 应用程序中。

以下是一个简单的示例，演示如何在 Android 平台上创建一个 Native UI Component，并在 JavaScript 中使用它：

Java

// MyNativeComponent.java
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.JSApplication;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;

public class MyNativeComponent extends SimpleViewManager<MyNativeView> {

  public static final String REACT_CLASS = "MyNativeComponent";

  @Override
  public String getName() {
    return REACT_CLASS;
  }

  @Override
  protected MyNativeView createViewInstance(ThemedReactContext context) {
    return new MyNativeView(context);
  }

  @ReactProp(name = "text")
  public void setText(MyNativeView view, String text) {
    view.setText(text);
  }
}

// MyNativeView.java
import android.content.Context;
import android.widget.TextView;

public class MyNativeView extends TextView {

  public MyNativeView(Context context) {
    super(context);
  }

  public void setText(String text) {
    super.setText(text);
  }
}

在这个示例中，我们定义了一个名为 MyNativeComponent 的 Native UI Component，它有一个名为 text 的属性，用于设置文本内容。同时，我们还定义了一个名为 MyNativeView 的原生视图类，用于显示文本内容。

JavaScript

import React from 'react';
import { View, Text } from 'react-native';
import { MyNativeComponent } from 'react-native';

const App = () => {
  return (
    <View>
      <MyNativeComponent text="Hello, World!" />
    </View>
  );
};

export default App;

在这个示例中，我们首先导入了 MyNativeComponent。然后，我们在 App 组件中使用它，并设置了 text 属性的值。

Turbo 模块

Turbo 模块是 RN 中的一种新型的原生模块，它可以在不需要 JavaScript 线程的情况下直接在原生线程上执行代码。这样可以大大提高性能，尤其是在处理大量数据或进行复杂计算时。

以下是一个简单的示例，演示如何在 iOS 平台上创建一个 Turbo 模块，并在 JavaScript 中使用它：

Objective-C

// MyTurboModule.h
#import <React/RCTTurboModule.h>

@interface MyTurboModule : NSObject <RCTTurboModule>

@end

// MyTurboModule.m
#import "MyTurboModule.h"

@implementation MyTurboModule

- (void)add:(double)a b:(double)b resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
  double result = a + b;
  resolve(@[ @(result) ]);
}

@end

在这个示例中，我们定义了一个名为 MyTurboModule 的 Turbo 模块，它有一个名为 add 的方法，接受两个数字参数 a 和 b，并返回它们的和。

JavaScript

import { NativeModules } from 'react-native';

const { MyTurboModule } = NativeModules;

MyTurboModule.add(1, 2).then((result) => {
  console.log(result); // 输出：3
});

在这个示例中，我们首先导入了 NativeModules API。然后，我们使用 MyTurboModule 对象来调用 add 方法，并传递两个数字参数。由于 add 方法是异步的，我们使用 then 方法来处理结果。

使用 C++ 实现跨平台的原生模块

如果你需要在 RN 应用程序中使用一些高性能的原生库或算法，可能需要使用 C++ 来实现跨平台的原生模块。RN 提供了一个名为 react-native-cxx 的库，用于简化这个过程。

以下是一个简单的示例，演示如何在 RN 应用程序中使用 C++ 实现的原生模块：

C++

// MyNativeModule.h
#include <react-native-cxx/JSI.h>

namespace MyNativeModule {
  void install(jsi::Runtime &rt);
}

// MyNativeModule.cpp
#include <react-native-cxx/JSI.h>
#include <iostream>

namespace MyNativeModule {
  jsi::Function sayHello(jsi::Runtime &rt) {
    return jsi::Function::createFromHostFunction(
      rt,
      jsi::PropNameID::forAscii(rt, "sayHello"),
      1,
      [](jsi::Runtime &rt, const jsi::Value &thisVal, const jsi::Value *args, size_t count) {
        std::string name = args[0].asString(rt).utf8();
        std::cout << "Hello, " << name << std::endl;
        return jsi::Value::undefined();
      }
    );
  }

  void install(jsi::Runtime &rt) {
    rt.global().setProperty(rt, jsi::PropNameID::forAscii(rt, "MyNativeModule"), jsi::Object(rt));
    rt.global().getProperty(rt, "MyNativeModule").asObject(rt).setProperty(rt, jsi::PropNameID::forAscii(rt, "sayHello"), sayHello(rt));
  }
}

在这个示例中，我们定义了一个名为 MyNativeModule 的 C++ 原生模块，它有一个名为 sayHello 的方法，接受一个字符串参数 name，并在控制台中打印出一条欢迎消息。

JavaScript

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.sayHello('John');

在这个示例中，我们首先导入了 NativeModules API。然后，我们使用 MyNativeModule 对象来调用 sayHello 方法，并传递一个字符串参数 name。

高级：自定义 C++ 类型

在某些情况下，你可能需要在 C++ 原生模块中使用自定义的数据类型。RN 提供了一个名为 react-native-cxx 的库，用于简化这个过程。

以下是一个简单的示例，演示如何在 RN 应用程序中使用自定义的 C++ 类型：

C++

// MyNativeModule.h
#include <react-native-cxx/JSI.h>

namespace MyNativeModule {
  class Person {
  public:
    std::string name;
    int age;

    Person(std::string name, int age) : name(name), age(age) {}
  };

  void install(jsi::Runtime &rt);
}

// MyNativeModule.cpp
#include <react-native-cxx/JSI.h>
#include <iostream>

namespace MyNativeModule {
  jsi::Function greet(jsi::Runtime &rt) {
    return jsi::Function::createFromHostFunction(
      rt,
      jsi::PropNameID::forAscii(rt, "greet"),
      1,
      [](jsi::Runtime &rt, const jsi::Value &thisVal, const jsi::Value *args, size_t count) {
        Person person = args[0].asObject(rt).asHostObject(rt).getHostObject(rt).as<Person>();
        std::cout << "Hello, " << person.name << " (" << person.age << ")" << std::endl;
        return jsi::Value::undefined();
      }
    );
  }

  void install(jsi::Runtime &rt) {
    rt.global().setProperty(rt, jsi::PropNameID::forAscii(rt, "MyNativeModule"), jsi::Object(rt));
    rt.global().getProperty(rt, "MyNativeModule").asObject(rt).setProperty(rt, jsi::PropNameID::forAscii(rt, "greet"), greet(rt));
  }
}

在这个示例中，我们定义了一个名为 Person 的自定义 C++ 类型，并在 greet 方法中使用它。greet 方法接受一个 Person 对象作为参数，并在控制台中打印出一条问候消息。

JavaScript

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

const person = {
  name: 'John',
  age: 30,
};

My

原文地址：https://blog.csdn.net/Ght19970126/article/details/144084903

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：java——Spring MVC的工作流程
下一篇：基于yolov8、yolov5的吸烟行为检测识别系统（含UI界面、训练好的模型、Python代码、数据集）

CTF之密码学（RSA加密）
RSA加密算法由Ron Rivest、Adi Shamir和Leonard Adleman在1977年共同发明，并因此得名。它是第一个既能用于数据加密也能用于数字签名的算法。RSA的安全性基于数论中的
阅读更多2024-11-28
D81【 python 接口自动化学习】- python基础之HTTP
request请求可以使用session会话保持登录态...
阅读更多2024-11-28
理解B+树
在数据库的世界里，数据检索的速度至关重要。为了提高数据检索的效率，数据库系统采用了多种数据结构，其中B+树（B-plus Tree）因其独特的特性而成为索引实现的首选。今天，我们将深入探讨B+树的原理
阅读更多2024-11-28
输入一行字符，分别统计出其中英文字母、空格、数字和其它字符的个数。-多语言
输入一行字符，分别统计出其中英文字母、空格、数字和其它字符的个数。利用while语句,条件为输入的字符不为'\n'。
阅读更多2024-11-28
python控制鼠标，键盘，adb
更新中…
阅读更多2024-11-28
在 Linux 系统中根据pid查找软件位置
获取进程的命令名称。：获取进程的完整可执行文件路径。：使用lsof查找可执行文件路径。pwdx ：显示进程的工作目录。这些方法可以帮助您快速找到进程对应的可执行文件的位置。
阅读更多2024-11-28
VM+Ubuntu18.04+XSHELL+VSCode环境配置
为什么要用虚拟机？想学习Linux操作系统，一般有3种方法可以实现：将自己的操作系统换成Linux操作系统（Linux操作系统使用日常办公、游戏等不方便，不推荐）；安装双系统（Windows+Linu
阅读更多2024-11-28
【机器学习】机器学习基础
机器学习（Machine Learning, ML）是一种人工智能（AI）的分支，指计算机通过数据学习规律并做出预测或决策，而无需明确编程。它的核心目标是让机器能够从经验中学习，逐渐提高自身表现。
阅读更多2024-11-28
git源码安装
使用"wget"命令下载Git源码包，例如："wget https://www.kernel.org/pub/software/scm/git/git-2.0.5.tar
阅读更多2024-11-28
Modern Effective C++ item 15:尽可能的使用constexpr
当constexpr应用于函数时，表示函数可以在编译期执行，因为参数也是编译期常量。常量表达式构造函数拥有和常量表达式函数相同的退化特性，当它的实参不是常量表达式的时候，构造函数可以退化为普通构造函数
阅读更多2024-11-28

React Native 原生开发指南

写在前面

桥接原生平台能力

Native Module

Native UI Component

Turbo 模块

使用 C++ 实现跨平台的原生模块

高级：自定义 C++ 类型

相关文章