auto-fill 基于 HarmonyOS autoFillManager 模块，提供将表单输入数据保存到历史表单输入中，以供下次自动填充的功能，仅支持 ohos 平台。
auto-fill-demo2.mp4
- 申请接入智能填充服务 。当前智能填充处于 Beta 阶段，您可通过发送邮件的方式进行申请接入。邮件模板可参考 智能填充概述-申请接入智能填充服务
- 设备智能填充开关必须处于打开状态，请前往“设置 > 隐私和安全 > 智能填充”打开。
- 设备已连接互联网。
- 设备需要登录华为账号。
- 业务侧需要给
TextInput组件传入textContentType属性。
请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-ohos-community/auto-fill Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。
进入到工程目录并输入以下命令：
- npm
npm install @react-native-ohos-community/auto-fill
- yarn
yarn add @react-native-ohos-community/auto-fill
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import AutoFill from '@react-native-ohos-community/auto-fill';
const MyFormComponent = () => {
const [fullName, setFullName] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const handleSubmit = () => {
AutoFill.autoSave(
() => {
console.log('AutoFillTurboModule success in js is been called');
},
() => {
console.log('AutoFillTurboModule failed in js is been called');
}
);
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Full Name"
value={fullName}
onChangeText={setFullName}
autoCapitalize="words"
textContentType="name"
/>
<TextInput
style={styles.input}
placeholder="Phone Number"
value={phoneNumber}
onChangeText={setPhoneNumber}
keyboardType="phone-pad"
textContentType="telephoneNumber"
/>
<Button title="Submit" onPress={handleSubmit} />
</View>
);
};
export default MyFormComponent;初次调用 AutoFill.autoSave 将弹出“保存至历史表单输入”半模态窗。
- 点击 “保存信息” 按钮之后，智能填充开关会打开并将表单输入数据保存到历史表单输入中。
- 点击 “忽略” 按钮后，该设备 24 小时之内不会再次询问。该设备累计忽略 5 次后，半模态中将显示“忽略后不再询问”勾选框，勾选之后点击“忽略”按钮，后续将不再询问。
- 联系人信息填充: 适用于如购票信息、收货信息等联系人数据相关表单
- 账号密码填充：适用于如登录界面相关表单
- 页面跳转时表单自动填充
- 示例代码可查看 ContactsComponent.tsx
具体密码保存与填充规则请参考：密码自动填充服务
React-Native 侧 TextInput 组件接收的 textContentType 类型与 HarmonyOS 中 ContentType 类型映射关系如下，可供参考。
// key 值为 RN 侧 textContentType 值,
// value 值为 HarmonyOS 侧 ContentType 值
{
"addressCity": CITY_ADDRESS, // 市
"addressState": PROVINCE_ADDRESS, // 省
"countryName": COUNTRY_ADDRESS, // 国家
"creditCardNumber": BANK_CARD_NUMBER, // 银行卡号
"fullStreetAddress": FULL_STREET_ADDRESS, // 详细地址
"sublocality": DISTRICT_ADDRESS, // 区/县
"telephoneNumber": PHONE_NUMBER, // 手机号码
"username": USER_NAME, // 用户名
"password": PASSWORD, // 密码
"newPassword": NEW_PASSWORD, // 新密码
"houseNumber": HOUSE_NUMBER, // 门牌号
"districtAddress": DISTRICT_ADDRESS, // 区/县
"cityAddress": CITY_ADDRESS, // 市
"provinceAddress": PROVINCE_ADDRESS, // 省
"countryAddress": COUNTRY_ADDRESS, // 国家
"personFullName": PERSON_FULL_NAME, // 姓名
"personLastName": PERSON_LAST_NAME, // 姓氏
"personFirstName": PERSON_FIRST_NAME, // 名字
"phoneNumber": PHONE_NUMBER, // 手机号码
"phoneCountryCode": PHONE_COUNTRY_CODE, // 国家代码
"fullPhoneNumber": FULL_PHONE_NUMBER, // 包含国家代码的手机号码
"emailAddress": EMAIL_ADDRESS, // 邮箱地址
"bankCardNumber": BANK_CARD_NUMBER, // 银行卡号
"idCardNumber": ID_CARD_NUMBER, // 身份证号
"nickName": NICKNAME, // 昵称
"name": PERSON_FULL_NAME, // 姓名
"familyName": PERSON_LAST_NAME, // 姓氏
"givenName": PERSON_FIRST_NAME, // 名字
"detailInfoWithoutStreet": DETAIL_INFO_WITHOUT_STREET,// 无街道地址
"formatAddress": FORMAT_ADDRESS, // 标准地址
}目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。
首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony
{
"overrides": {
"@rnoh/react-native-openharmony": "./react_native_openharmony"
}
}目前有两种方法：
（1）通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
（2）直接链接源码。
方法 一：通过 har 包引入（推荐）
[!TIP] har 包位于三方库安装路径的
harmony文件夹下。
打开 entry/oh-package.json5，添加以下依赖
"dependencies": {
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
"@react-native-ohos-community/auto-fill": "file:../../node_modules/@react-native-ohos-community/auto-fill/harmony/auto_fill.har"
}点击右上角的 sync 按钮
或者在终端执行：
cd entry
ohpm install方法 二：直接链接源码
如需使用直接链接源码，请参考直接链接源码说明
打开 entry/src/main/cpp/CMakeLists.txt，添加：
project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
...
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
# RNOH_BEGIN: manual_package_linking_1
+ add_subdirectory("${OH_MODULES}/@react-native-ohos-community/auto-fill/src/main/cpp" ./auto-fill)
# RNOH_END: manual_package_linking_1
add_library(rnoh_app SHARED
${GENERATED_CPP_FILES}
"./PackageProvider.cpp"
"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
# RNOH_BEGIN: manual_package_linking_2
+ target_link_libraries(rnoh_app PUBLIC auto_fill)
# RNOH_END: manual_package_linking_2打开 entry/src/main/cpp/PackageProvider.cpp，添加：
#include "RNOH/PackageProvider.h"
+ #include "AutoFillPackage.h"
using namespace rnoh;
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(
Package::Context ctx) {
return {
+ std::make_shared<AutoFillPackage>(ctx),
};
}打开 entry/src/main/ets/RNPackagesFactory.ts，添加：
...
+ import { AutoFillPackage } from '@react-native-ohos-community/auto-fill/ts'
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
+ new AutoFillPackage(ctx),
];
}要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@react-native-ohos-community/auto-fill Releases
auto-fill 仅暴露一个 autoSave 接口，用于保存当前表单信息
| API | 说明 | 入参 | 返回值 |
|---|---|---|---|
| autoSave(onSuccess?, onFailure?) | 保存当前表单信息 | (onSuccess?: () => void, onFailure?: () => void) | void |
autoSave 方法在 native 侧限制 2s 内只能调用一次，多次调用将触发 onFailure 回调，并输出
autoSave called too frequently, please wait for 2 seconds.
本项目基于 Apache License 2.0 ，请自由地享受和参与开源。