将 MobileFirst Foundation SDK 添加到 React Native 应用程序

概述

在此教程中，了解如何将 MobileFirst SDK 添加到使用 React Native CLI 创建的新的或现有的 React Native 应用程序。您还可以了解如何配置 MobileFirst Server 以识别应用程序，以及查找有关在项目中更改的 MobileFirst 配置文件的信息。

MobileFirst React Native SDK 作为 react native npm 插件提供，并且在 NPM 上注册。

可用插件包括：

• react-native-ibm-mobilefirst - 核心 SDK 插件

跳转至：

• React Native SDK 组件
• 添加 MobileFirst React Native SDK
• 更新 MobileFirst React Native SDK
• 已生成 MobileFirst React Native SDK 工件
• 接下来要学习的教程

React Native SDK 组件

react-native-ibm-mobilefirst

react-native-ibm-mobilefirst 插件是针对 React Native 的核心 MobileFirst 插件，且此插件是必需的。如果安装任何其他 MobileFirst 插件，并且 react-native-ibm-mobilefirst 插件尚未安装，那么也将自动安装此插件。

先决条件：

• 安装在开发人员工作站上的 React Native CLI 和 MobileFirst CLI。
• MobileFirst Server 的本地或远程实例正在运行。
• 阅读设置您的 MobileFirst 开发环境和设置您的 React Native 开发环境教程。

添加 Mobile Foundation React Native SDK

遵循下面的指示信息将 Mobile Foundation React Native SDK 添加到新的或现有的 React Native 项目，然后在 MobileFirst Server 中进行注册。

在您开始之前，确保 MobileFirst Server 正在运行。
如果使用本地安装的服务器：从命令行窗口，浏览至服务器的文件夹，然后运行命令：./run.sh。

添加 SDK

新建应用程序

1. 创建 React Native 项目：react-native init projectName。
   例如：

   react-native init Hello
   

   • Hello 是文件夹名称和应用程序名称。

   模板化的 index.js 使您能够使用其他 MobileFirst 功能，如多语言应用程序翻译和初始化选项（请参阅用户文档以获取更多信息）。

2. 将目录切换至 React Native 项目的根目录：cd hello

3. 使用 NPM CLI 命令添加 MobileFirst 插件：npm install react-native-plugin-name 例如：

   npm install react-native-ibm-mobilefirst
   

   上述命令会将 MobileFirst 核心 SDK 插件添加到 React native 项目。

4. 通过运行以下命令链接插件库：

   react-native link
   

现有应用程序

1. 浏览至现有 React Native 项目的根目录并添加 MobileFirst 核心 React Native 插件：

   npm install react-native-ibm-mobilefirst
   

2. 通过运行以下命令链接插件库：

   react-native link
   

注册应用程序

1. 打开命令行窗口并浏览至项目的特定平台（iOS 或 Android）的根目录。

2. 向 MobileFirst Server 注册此应用程序：

   mfpdev app register
   

• iOS：

  如果您的平台是 iOS，那么将请求您提供应用程序的 BundleID。要点：BundleID 是区分大小写的。

  mfpdev app register CLI 命令将先连接到 MobileFirst Server 以注册应用程序，然后在 Xcode 项目的根目录生成 mfpclient.plist 文件，并向该文件添加用来标识 MobileFirst Server 的元数据。

• Android：

  如果您的平台是 Android，那么将请求您提供应用程序的包名称。要点：包名称是区分大小写的。

  mfpdev app register CLI 命令先连接到 MobileFirst Server 以注册应用程序，之后在 Android Studio 项目的 [project root]/app/src/main/assets/ 文件夹中生成 mfpclient.properties 文件，然后向其添加标识 MobileFirst Server 的元数据。

如果使用的是远程服务器，请使用命令 mfpdev server add 进行添加。

mfpdev app register CLI 命令将先连接到 MobileFirst Server 以注册应用程序。会在 MobileFirst Server 中将每个平台注册为应用程序。

提示：您还可以从 MobileFirst Operations Console 注册应用程序：

1. 装入 MobileFirst Operations Console。
2. 单击应用程序旁边的新建按钮以注册新应用程序，并遵循屏幕上的指示信息。

更新 MobileFirst React Native SDK

要使用最新发行版更新 MobileFirst React native SDK，请除去 react-native-ibm-mobilefirst 插件：运行 npm uninstall react-native-ibm-mobilefirst 命令，然后运行 npm install react-native-ibm-mobilefirst 命令以重新添加。

可以在 SDK 的 NPM 存储库中找到 SDK 发行版。

已生成 MobileFirst React Native SDK 工件

Android 环境

mfpclient.properties

此文件位于 Android Studio 项目的 ./app/src/main/assets/ 文件夹中，可定义用于在 MobileFirst Server 上注册 Android 应用程序的客户机端属性。

| 属性 | 描述 | 示例值 | |———————|———————————————————————|—————-| | wlServerProtocol | 与 MobileFirst Server 的通信协议。 | http 或 https | | wlServerHost | MobileFirst Server 的主机名。 | 192.168.1.63 | | wlServerPort | MobileFirst Server 的端口。 | 9080 | | wlServerContext | MobileFirst Server 上应用程序的上下文根路径。 | /mfp/ | | languagePreferences | 为客户机 sdk 系统消息设置缺省语言。 | zh |

iOS 环境

mfpclient.plist

此文件位于项目的根目录中，定义用于在 MobileFirst Server 上注册 iOS 应用程序的客户机端属性。

| 属性 | 描述 | 示例值 | |———————|———————————————————————|—————-| | protocol | 与 MobileFirst Server 的通信协议。 | http 或 https | | host | MobileFirst Server 的主机名。 | 192.168.1.63 | | port | MobileFirst Server 的端口。 | 9080 | | wlServerContext | MobileFirst Server 上应用程序的上下文根路径。 | /mfp/ | | languagePreferences | 为客户机 sdk 系统消息设置缺省语言。 | zh |

接下来要学习的教程

集成 MobileFirst React Native SDK 之后，您现在可以：

• 查看使用 Mobile Foundation SDK 教程
• 查看适配器开发教程
• 查看认证和安全教程
• 查看通知教程
• 查看所有教程