@react-native-ohos-community/auto-fill

auto-fill
├── assets                # README静态资源
├── LICENSE
├── README.md
├── package.json
├── auto-fill             # 源码包
│   ├── harmony           # native 源码
│   ├── index.ts
│   ├── package.json
│   └── src
└── tester                # 使用了 auto-fill 的 react-native 示例工程

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;

// 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, // 标准地址
}

{
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

"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"
  }

cd entry
ohpm install

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

#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),
  };
}

  ...
+ import { AutoFillPackage } from '@react-native-ohos-community/auto-fill/ts'

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
+   new AutoFillPackage(ctx),
  ];
}