02-20 18:20 广州软件学院前端工程师发布于广东

关注

Part5.泛端开发趣闻：React Native App 开发要点(3/5)

React Native 开发环境搭建指南

React Native 是一个用于构建跨平台移动应用的框架，允许开发者使用 JavaScript 和 React 来创建 iOS 和 Android 应用。以下是 React Native 开发环境的搭建步骤：

1. 安装 Node.js 和 npm

React Native 需要 Node.js 和 npm（Node 包管理器）。你可以通过以下步骤安装它们：

1.1 下载并安装 Node.js

访问 Node.js 官网下载适合你操作系统的安装包。
安装过程中，npm 会自动安装。

1.2 验证安装

安装完成后，打开终端（命令行）并运行以下命令，验证 Node.js 和 npm 是否安装成功：

node -v
npm -v

如果显示版本号，说明安装成功。

2. 安装 React Native CLI

React Native 提供了一个命令行工具（CLI），用于创建和管理项目。你可以通过 npm 安装它：

npm install -g react-native-cli

3. 安装 Android 开发环境（适用于 Android 开发）

3.1 安装 Java Development Kit (JDK)

访问 Oracle JDK 官网或 OpenJDK 官网下载并安装 JDK。
设置环境变量：
- 在 Windows 上，设置 JAVA_HOME 环境变量指向 JDK 安装路径。
- 在 macOS 和 Linux 上，编辑 ~/.bash_profile 或 ~/.zshrc 文件，添加以下内容：
```
export JAVA_HOME=/path/to/jdk
export PATH=$JAVA_HOME/bin:$PATH
```

3.2 安装 Android Studio

访问 Android Studio 官网下载并安装 Android Studio。
安装过程中，确保选择安装 Android SDK、Android SDK Platform、Android Virtual Device 等组件。

3.3 配置 Android SDK

打开 Android Studio，点击 "Configure" -> "SDK Manager"。
在 "SDK Platforms" 选项卡中，选择你需要的 Android 版本。
在 "SDK Tools" 选项卡中，选择 "Android SDK Build-Tools"、"Android Emulator"、"Android SDK Platform-Tools" 等工具。

3.4 设置环境变量

在 Windows 上，设置 ANDROID_HOME 环境变量指向 Android SDK 安装路径。

在 macOS 和 Linux 上，编辑 ~/.bash_profile 或 ~/.zshrc 文件，添加以下内容：

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH

4. 安装 iOS 开发环境（适用于 iOS 开发）

4.1 安装 Xcode

访问 Mac App Store 下载并安装 Xcode。
安装完成后，打开 Xcode 并同意许可协议。

4.2 安装 CocoaPods

CocoaPods 是 iOS 的依赖管理工具，你可以通过以下命令安装：

sudo gem install cocoapods

5. 创建 React Native 项目

使用 React Native CLI 创建一个新的项目：

npx react-native init MyReactNativeApp

6. 运行项目

6.1 运行 Android 项目

打开终端，进入项目目录：
```
cd MyReactNativeApp
```
连接 Android 设备或启动 Android 模拟器。
运行以下命令启动项目：
```
npx react-native run-android
```

6.2 运行 iOS 项目

打开终端，进入项目目录：
```
cd MyReactNativeApp
```
运行以下命令启动项目：
```
npx react-native run-ios
```

7. 开发工具

7.1 代码编辑器

推荐使用 Visual Studio Code 或 WebStorm 等代码编辑器，它们支持 React Native 开发，并提供丰富的插件和扩展。

7.2 调试工具

React Native Debugger：一个独立的调试工具，支持 Redux 和 React DevTools。
Chrome DevTools：通过 Chrome 浏览器调试 JavaScript 代码。

8. 常见问题

权限问题：在 macOS 上，可能需要授予终端访问文件系统的权限。
环境变量问题：确保所有环境变量设置正确，特别是 JAVA_HOME 和 ANDROID_HOME。
依赖问题：如果遇到依赖安装问题，尝试清除 npm 缓存并重新安装依赖。

通过以上步骤，你应该能够成功搭建 React Native 开发环境，并开始开发跨平台的移动应用。如果在搭建过程中遇到问题，可以参考 React Native 官方文档或社区资源寻求帮助。

React Native 初始搭建与基础配置

在 React Native 的开发过程中，初始环境搭建和相关基础配置非常重要。接下来，我将指导你如何设置一个新的 React Native 项目并进行基本配置，以便于你开始开发。

1. 创建新项目

首先，你需要确保 React Native CLI 已安装。然后，通过以下命令创建一个新项目：

npx react-native init MyReactNativeApp

在上述命令中，MyReactNativeApp 是项目名称，可以替换为你想要的任何名称。这个命令将创建一个新的 React Native 项目及其文件结构。

2. 进入项目目录

创建完项目后，进入新创建的项目目录：

cd MyReactNativeApp

3. 安装依赖

确保你安装了项目所需的依赖项，比如 React Navigation 等。可以通过以下命令安装 React Navigation 及其依赖：

npm install @react-navigation/native
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

4. 配置 Android 和 iOS

根据不同的平台，可能需要进行一些额外的配置。

4.1 Android 项目配置

打开 Android Studio

打开 MyReactNativeApp/android 文件夹，确保你安装了 Android SDK，设定为项目可使用的 SDK 版本。

修改 Gradle 文件

在 android/build.gradle 中，添加 Google Maven 仓库：

allprojects {
    repositories {
        mavenCentral()
        google()
    }
}

配置项目的 android/app/build.gradle

确保你的配置包含以下内容：

在 android/app/build.gradle 中，设置合适的 compileSdkVersion 和 targetSdkVersion：

android {
    compileSdkVersion 31 // 或你选择的更高版本

    defaultConfig {
        applicationId "com.myreactnativeapp"
        minSdkVersion 21 // 按需求设置
        targetSdkVersion 31 // 或你选择的更高版本
        versionCode 1
        versionName "1.0"
    }
}

使 Apollo 和 JavaScript API 可用

确保在 MainActivity.java 中，添加以下代码，以便使用 React Native Navigation 的功能：

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactApplication;

4.2 iOS 项目配置

安装 CocoaPods

进入到 ios 文件夹并安装 CocoaPods 依赖：
```
cd ios
pod install
cd ..
```
打开 Xcode

使用 Xcode 打开 ios/MyReactNativeApp.xcworkspace 文件，确保在 Xcode 中配置了通用设置，比如 Apple 开发者账号等信息。

修改 Info.plist

如果你的应用需要使用某些权限，例如相机或位置服务，在 ios/MyReactNativeApp/Info.plist 中进行配置。例如：

<key>NSCameraUsageDescription</key>
<string>需要使用相机来拍照</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要使用地理位置来定位</string>

5. 运行应用

完成所有配置后，你可以在 Android 和 iOS 上运行项目：

5.1 运行 Android 应用

确保你已启动 Android 模拟器或连接 Android 设备，然后在项目目录下运行：

npx react-native run-android

5.2 运行 iOS 应用

确保打开 Xcode 模拟器，或者将物理设备连接到你的电脑。然后在项目目录下运行：

npx react-native run-ios

6. 开发基础配置

6.1 配置 ESLint 和 Prettier

为了保持代码的整洁性和一致性，可以配置 ESLint 和 Prettier。

安装 ESLint 和 Prettier：

npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier

创建 .eslintrc.js 配置文件：

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:prettier/recommended',
    ],
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
    },
    rules: {
        // 在此处添加自定义规则
    },
};

创建 .prettierrc 配置文件：

{
    "semi": true,
    "singleQuote": true
}

6.2 配置 Git 版本控制

在项目根目录下运行以下命令初始化 Git 仓库：

git init

然后可以创建 .gitignore 文件，添加常见的忽略项：

node_modules
ios/Pods
*.lock

7. 重要的注意事项

确保所有依赖版本与 React Native 版本兼容。
定期检查依赖项的更新。
在开发应用过程中，保持每天进行代码的安全备份。

通过完成上述步骤，你就可以顺利搭建 React Native 的初始环境，并进行一些基础配置，这将为你的开发工作打下良好的基础。

React Native 热更新开发体验详解

热更新是 React Native 开发中的一项重要功能，它能够在不重新加载整个应用程序的情况下，快速反映代码的变更，提高开发效率。下面将介绍热更新的相关概念、配置及如何进行开发体验。

1. 什么是热更新

热更新允许开发者在应用运行时，对 JavaScript 代码进行修改，并立即在设备或模拟器上看到变更的效果。这样，开发者不需要每次修改代码后都重新启动应用，从而提升了开发速度和体验。

2. 如何使用热更新

在 React Native 中，热更新通常通过 Metro bundler 实现。Metro 是 React Native 的默认打包器，支持容器内的快速重新加载。

2.1 启动项目

确保你的 React Native 项目正在运行。你可以通过以下命令启动 Metro bundler：

npx react-native start

这将会启动一个开发服务器，并在命令行中打印出相关的日志信息。

2.2 运行应用

在另一个终端窗口中，可以运行以下命令启动应用：

对于 Android：
```
npx react-native run-android
```
对于 iOS：
```
npx react-native run-ios
```

3. 使用热更新的开发流程

3.1 修改代码

当你在项目中修改 JavaScript 代码时，Metro bundler 会自动检测这些更改。在编辑器中保存文件后，Metro 会编译这些更改，并将其推送到模拟器或设备上。在实际设备上运行时，你会在屏幕上看到一个提示，说明代码正在更新。

3.2 热重载和实时重载

React Native 提供了两种热更新方式：

热重载（Hot Reloading）：这个功能让你在不失去当前应用程序状态的情况下替换刚刚更改的文件。对于组件状态保持尤为有效。
实时重载（Live Reloading）：每当文件被保存时，应用会自动重新加载。这种方式虽然可以使你看到更改，但是会丢失组件的状态。

你可以在开发者菜单中选择激活热重载或实时重载。打开开发者菜单的方法如下：

Android：摇动设备，或者使用 adb shell input keyevent 82 命令。
iOS：双击设备的 Home 按钮，或摇动设备。

3.3 开发者菜单

在开发者菜单中，你可以控制热更新的行为，包括：

启用/禁用热重载和实时重载
查看性能监视器
打开开发者文档
刷新/重启应用

4. 调试和性能监控

在使用热更新进行开发时，你可以同时利用调试工具来诊断代码问题：

React Developer Tools：用于检查 React 组件的状态和 props。
Redux DevTools（如果使用 Redux）：用于调试 Redux 状态变化。
Flipper：一个强大的调试工具，可以集成多种功能。

5. 注意事项

确保你在开发过程中使用的是开发模式，以充分利用热更新功能。
虽然热更新非常方便，但在进行大规模更改（例如更改应用结构或依赖项）时，可能需要重新启动应用。
热更新在复杂状态管理（如 Redux 或 MobX）中可能不如预期工作，需谨慎使用。

6. 总结

热更新大大提升了 React Native 开发的效率和体验，可以让开发者快速看到代码变化的结果，避免繁琐的重启过程。在项目开发中充分利用这个功能，可以帮助你更高效地构建应用，并快速迭代。

Flexbox 在 React Native 界面布局中的应用

在 React Native 中，使用 Flexbox 来实现界面布局是非常常见和推荐的做法。Flexbox 是一种用于构建响应式布局的强大工具，它能够轻松地控制组件在屏幕上的排列方式。下面将介绍如何在 React Native 中使用 Flexbox 来实现界面布局。

1. Flexbox 基础概念

Flexbox 的基本概念包括：

主轴（Main Axis）：表示元素排列的方向，可以是水平（row）或垂直（column）。
交叉轴（Cross Axis）：与主轴垂直的方向。
容器（Flex Container）：使用 flex 布局的父组件。
项（Flex Item）：容器内部的子组件。

2. Flexbox 在 React Native 中的基本使用

下面是一些常见的 Flexbox 属性及其在 React Native 中的应用：

flexDirection: 设置主轴方向，可以是 row（默认）、column、row-reverse 或 column-reverse。
justifyContent: 控制主轴上元素的对齐方式：
- flex-start: 元素靠左（或顶部）对齐。
- flex-end: 元素靠右（或底部）对齐。
- center: 元素居中对齐。
- space-between: 在元素之间均匀分配空白空间。
- space-around: 在元素周围均匀分配空白空间。
alignItems: 控制交叉轴上元素的对齐方式：
- flex-start: 靠交叉轴的起始位置对齐。
- flex-end: 靠交叉轴的结束位置对齐。
- center: 在交叉轴上居中对齐。
- stretch: 填满容器（默认）。
flex: 定义项目的相对尺寸，表示在主轴上如何分配空间。

3. 示例：使用 Flexbox 创建简单布局

下面是一个使用 Flexbox 实现的简单布局示例。在这个示例中，我们将创建一个包含三个子组件的垂直布局，其中每个组件的高度和水平对齐方式不同。

代码示例：

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.boxText}>Box 1</Text>
      </View>
      <View style={styles.box2}>
        <Text style={styles.boxText}>Box 2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.boxText}>Box 3</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column', // 垂直方向
    justifyContent: 'center', // 主轴居中对齐
    alignItems: 'center', // 交叉轴居中对齐
    backgroundColor: '#f5fcff',
  },
  box1: {
    width: 100,
    height: 100,
    backgroundColor: '#ff6347',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  box2: {
    width: 100,
    height: 100,
    backgroundColor: '#4682b4',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  box3: {
    width: 100,
    height: 100,
    backgroundColor: '#32cd32',
    justifyContent: 'center',
    alignItems: 'center',
  },
  boxText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

export default App;

4. 代码分析

主容器: container 使用 flex: 1 属性，使其充满整个屏幕。flexDirection: 'column' 确保子组件垂直排列。
对齐方式: justifyContent: 'center' 和 alignItems: 'center' 使所有子组件在容器中居中显示。
子组件: 每个子组件（box1, box2, box3）都有不同的背景色和相同的尺寸，且使用 marginBottom 属性在它们之间创造间距。

5. 常见布局模式

可以使用 Flexbox 来实现各种常见的布局模式，如三分布局、网格布局、卡片布局等。以下是一些示例：

三栏布局

container: {
  flex: 1,
  flexDirection: 'row',
},
box: {
  flex: 1, // 平均分配宽度
  height: 100,
},

网格布局

使用 flexWrap 属性将布局元素换行：

container: {
  flex: 1,
  flexDirection: 'row',
  flexWrap: 'wrap', // 允许换行
},
box: {
  width: '30%', // 设置宽度以适应多列
  height: 100,
  margin: '1%',
},

6. 总结

使用 Flexbox 可以简化 React Native 中的布局工作。通过灵活运用 Flexbox 的属性，你可以创建响应式且美观的用户界面。希望这个介绍以及示例能帮助你更好地理解和应用 Flexbox。

React Native 界面布局与长列表呈现技巧

在移动应用开发中，常见的界面布局和长列表呈现是非常重要的。以下内容将介绍几种常见的界面布局以及在 React Native 中如何使用 FlatList 来实现长列表呈现。

一、常见界面布局

1. 单列布局

这种布局适合简单的内容展示，通常用于信息展示型的应用界面。

<View style={styles.container}>
  <Text>Title</Text>
  <Text>Content...</Text>
</View>

2. 多列布局

多列布局常用于展示商品、图片或者其他可呈现的元素。可以使用 Flexbox 来实现：

<View style={styles.container}>
  <View style={styles.column}>
    <Text>Item 1</Text>
  </View>
  <View style={styles.column}>
    <Text>Item 2</Text>
  </View>
  <View style={styles.column}>
    <Text>Item 3</Text>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  column: {
    width: '30%', // 根据需求调整宽度
    margin: 5,
  },
});

3. 卡片布局

卡片布局常用于信息卡、产品展示等，给人一种分隔的视觉效果。

<View style={styles.card}>
  <Text>Card Title</Text>
  <Text>Card Content...</Text>
</View>

const styles = StyleSheet.create({
  card: {
    padding: 10,
    margin: 10,
    backgroundColor: '#fff',
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 1,
  },
});

4. Tab 导航布局

常见于需要不同页面之间切换的应用。可以使用 react-navigation 库来实现：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

二、长列表呈现

在 React Native 中，长列表通常使用 FlatList 组件来渲染。这是一个高效的组件，用于处理长列表数据，可以完成懒加载和性能优化。

1. 基本使用

首先，你需要准备数据源，然后使用 FlatList 进行渲染。

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

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const App = () => {
  return (
    <FlatList
      data={DATA}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  title: {
    fontSize: 18,
  },
});

export default App;

2. FlatList 常用属性

data: 数据源。
renderItem: 渲染每一项的函数。
keyExtractor: 唯一标识每一项的函数。
onEndReached: 滚动到底部时执行的函数，适合用于加载更多数据。
onRefresh: 用于下拉刷新。
refreshing: 指示当前是否在刷新状态。

3. 实现加载更多

使用 onEndReached 和 onEndReachedThreshold 实现加载更多数据：

const App = () => {
  const [data, setData] = React.useState(DATA.slice(0, 20));
  const [loading, setLoading] = React.useState(false);

  const loadMore = () => {
    if (loading) return;
    setLoading(true);
    setTimeout(() => {
      const newData = DATA.slice(data.length, data.length + 20);
      setData(prev => [...prev, ...newData]);
      setLoading(false);
    }, 1000); // 模拟网络请求延时
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      onEndReached={loadMore}
      onEndReachedThreshold={0.1} // 距离底部 10%
      ListFooterComponent={loading ? <Text>Loading...</Text> : null} // 显示加载指示
    />
  );
};

三、总结

通过上述内容，你可以了解到常见的界面布局方式以及如何使用 FlatList 组件高效地展示长列表数据。合理利用 Flexbox 和 FlatList 可以帮助你实现流畅且响应式的用户界面。

第三方 Native 组件接入：Objective - C 等语言实践

在 React Native 中，如果你想使用原生的 Objective-C、Swift 或 Java 组件，可以通过创建一个 Native Module 来实现。这样你就可以在 JavaScript 中调用原生代码。以下是接入第三方 Native 组件的步骤：

一、Objective-C 组件

1. 创建 Objective-C 模块

首先，在 Xcode 中创建一个新的 Objective-C 文件，例如 MyCustomModule.m 和 MyCustomModule.h。

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

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

// MyCustomModule.m
#import "MyCustomModule.h"

@implementation MyCustomModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(showMessage:(NSString *)message)
{
  UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Message"
                                                                 message:message
                                                          preferredStyle:UIAlertControllerStyleAlert];
  UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK"
                                                     style:UIAlertActionStyleDefault
                                                   handler:nil];
  [alert addAction:okAction];
  
  UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController;
  [rootViewController presentViewController:alert animated:YES completion:nil];
}

@end

2. 在 JavaScript 中调用

在 JavaScript 中，你可以通过 NativeModules 来调用这个模块。

import { NativeModules } from 'react-native';

const { MyCustomModule } = NativeModules;

MyCustomModule.showMessage('Hello from React Native!');

二、Swift 组件

1. 创建 Swift 模块

首先，在 Xcode 中创建一个新的 Swift 文件，例如 MyCustomModule.swift。

// MyCustomModule.swift
import Foundation

@objc(MyCustomModule)
class MyCustomModule: NSObject {
  
  @objc
  func showMessage(_ message: String) {
    let alert = UIAlertController(title: "Message", message: message, preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
    
    let rootViewController = UIApplication.shared.keyWindow?.rootViewController
    rootViewController?.present(alert, animated: true, completion: nil)
  }
  
  @objc
  static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

2. 创建 Objective-C 桥接文件

为了在 React Native 中使用 Swift 模块，你需要创建一个 Objective-C 桥接文件，例如 MyCustomModuleBridge.m。

// MyCustomModuleBridge.m
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(MyCustomModule, NSObject)

RCT_EXTERN_METHOD(showMessage:(NSString *)message)

@end

3. 在 JavaScript 中调用

与 Objective-C 类似，你可以在 JavaScript 中调用这个模块。

import { NativeModules } from 'react-native';

const { MyCustomModule } = NativeModules;

MyCustomModule.showMessage('Hello from React Native!');

三、Java 组件

1. 创建 Java 模块

首先，在 Android Studio 中创建一个新的 Java 文件，例如 MyCustomModule.java。

// MyCustomModule.java
package com.yourapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

import android.widget.Toast;

public class MyCustomModule extends ReactContextBaseJavaModule {

  public MyCustomModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "MyCustomModule";
  }

  @ReactMethod
  public void showMessage(String message) {
    Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
  }
}

2. 创建 Package

然后，创建一个 Package 文件来注册这个模块，例如 MyCustomPackage.java。

// MyCustomPackage.java
package com.yourapp;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyCustomPackage implements ReactPackage {

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new MyCustomModule(reactContext));
    return modules;
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

3. 注册 Package

最后，在 MainApplication.java 中注册这个 Package。

// MainApplication.java
package com.yourapp;

import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new MyCustomPackage() // 添加自定义 Package
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

4. 在 JavaScript 中调用

在 JavaScript 中，你可以通过 NativeModules 来调用这个模块。

import { NativeModules } from 'react-native';

const { MyCustomModule } = NativeModules;

MyCustomModule.showMessage('Hello from React Native!');

四、总结

通过上述步骤，你可以成功地将 Objective-C、Swift 或 Java 组件接入到 React Native 项目中。这样你就可以在 JavaScript 中调用原生代码，实现更复杂的功能。

React Native 架构原理深度剖析

React Native 是一个用于构建移动应用的框架，其架构设计旨在提供高效的跨平台开发体验。理解 React Native 的架构实现原理可以帮助开发者更好地使用和扩展这个框架。下面是 React Native 架构的主要组成部分和原理说明。

1. 架构概述

React Native 的架构分为以下几个主要部分：

JavaScript 线程：运行 JavaScript 代码，处理 React 组件的生命周期和渲染逻辑。
原生线程：负责与原生平台的交互（如 UI 渲染、网络请求等）。
桥接机制（Bridge）：JavaScript 线程和原生线程之间的通信通道。

2. 核心组件

2.1 JavaScript 线程

虚拟 DOM：React Native 使用虚拟 DOM 来优化 UI 更新。在 JavaScript 线程中，开发者定义应用的组件和布局。
组件生命周期：React 组件的生命周期管理在此线程中进行，包括构建、更新和卸载等过程。

2.2 原生线程

UI 线程：负责渲染原生视图。每当 JavaScript 代码请求更新 UI 时，UI 线程处理这些请求，并进行界面的实际渲染。
原生模块：原生模块可以提供访问设备原生功能（如相机、位置服务等）的接口。

3. 通信机制：桥接

Bridge：这是一个重要的组件，它实现 JavaScript 线程和原生线程之间的异步通信。桥接机制采用 JSON 格式的数据传递。
- 当 JavaScript 请求某些原生操作时，它首先将请求内容发送到桥。
- 原生线程接收到请求后，执行相应操作，并将结果返回给 JavaScript 线程。
- 这种异步通信方式增加了系统的灵活性，同时避免了锁定 UI 的主线程。

4. 渲染过程

渲染过程包括以下几个步骤：

JavaScript 逻辑：当应用需要更新时，JavaScript 线程会重新计算虚拟 DOM。
Diffing 算法：React 的 Diff 算法会比较新旧虚拟 DOM 的差异，确定哪些部分需要更新。
发起更新请求：将更新请求打包成消息，发送到桥接机制。
原生 UI 更新：原生线程接收到消息，应用变化，并更新 UI。

5. 打包与部署

React Native 应用通常被打包成 APK（Android）或 IPA（iOS）文件，利用原生构建工具（如 Gradle 和 Xcode）。
在构建过程中，JavaScript 代码和原生代码会被打包到一起，以便在用户的设备上运行。

6. 性能优化

按需加载：React Native 支持按需加载，只有在需要时才加载相关的 JavaScript 代码，从而提高应用的启动速度。
批量更新：通过使用批量处理，React Native 能够同步多个 UI 更新请求，从而提高渲染性能。
JIT/AOT 编译：部分 JavaScript 引擎（如 Hermes）支持即时编译 (JIT) 或提前编译 (AOT) 以提升性能。

7. 生态系统与扩展

第三方库：React Native 提供了丰富的第三方库和模块，可以方便地与原生代码进行集成，如地图、动画等功能。
自定义原生模块：开发者可以根据需求创建自定义的原生模块，以便实现特定功能或优化性能。

总结

React Native 的架构设计使得开发者能以一种相对简单的方式构建高性能的移动应用。通过桥接机制，它实现了 JavaScript 层与原生层的高效通信，同时确保了良好的用户体验和开发效率。由于其灵活性和可扩展性，React Native 已成为现代移动开发的重要工具之一。

前端求职突破计划文章被收录于专栏

你是否渴望全面提升前端技能？本专栏将带你畅游前端世界！从 JS 深析趣谈，让你领略 JavaScript 的独特魅力；到前端工程漫话，掌握项目构建精髓。深入洞察框架原理，探索 Node 全栈开发。泛端开发趣闻，开启多端应用新视野；揭秘商业解方奥秘，把握行业趋势。高阶专题层层剖析，助你突破技术瓶颈。更有前端面试指南，为求职保驾护航。无论你是新手小白还是资深开发者，这里都有你需要的知识盛宴！