模板版本：v0.4.0

`react-native-qrcode`

[Github 地址](https://github.com/react-native-oh-library/react-native-qrcode)

请到三方库的 Releases 发布地址查看配套的版本信息：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-qrcode	~ 0.3.0	Gitcode	0.77/0.82	否	API12+	0.2.7	Npm Address
@react-native-ohos/react-native-qrcode	~ 0.2.8	Gitcode	0.72	否	API12+	0.2.7	Npm Address
@react-native-oh-tpl/react-native-qrcode	<= 0.2.7-0.0.3@deprecated	Github Releases(deprecated)	0.72	否	API12+	0.2.7	Npm Address

1. 安装与使用

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-qrcode

yarn

yarn add @react-native-ohos/react-native-qrcode

下面的代码展示了这个库的基本使用场景：

使用时 import 的库名不变。

import React, { useState } from "react";
import QRCode from "react-native-qrcode";
import { StyleSheet, View, TextInput, Button } from "react-native";
export const QrCodeExample = () => {
  const [text, setText] = useState("");
  const [QRCodeValue, setQRCodeValue] = useState<any>(null);
  const showQRCode = () => {
    setQRCodeValue(text);
  };
  const reset = () => {
    setQRCodeValue(null);
    setText("");
  };
  return (
    <View style={styles.container}>
      <TextInput
        placeholder="请输入要生成二维码的文本"
        style={styles.input}
        onChangeText={(text) => setText(text)}
        value={text}
      />
      <View style={{ flexDirection: "row" }}>
        <Button title="点击生成二维码" onPress={showQRCode} />
        <Button title="重置" onPress={reset} />
      </View>

      {QRCodeValue && (
        <QRCode
          value={QRCodeValue}
          size={200}
          bgColor="black"
          fgColor="white"
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    alignItems: "center",
  },

  input: {
    width: 300,
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    margin: 10,
    borderRadius: 5,
    padding: 5,
  },
});

2. Link

本库鸿蒙侧实现依赖react-native-webview 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照react-native-webview 文档进行引入

3. 约束与限制

3.1 兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和手机 ROM。

在以下版本验证通过：

RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71;
RNOH: 0.77.18; SDK: HarmonyOS 6.0.0.47 (API Version 20); IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.107;
RNOH: 0.82.22; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.878; ROM: 6.0.0.130;

4. 属性

"Platform"列表示该属性在原三方库上支持的平台。

"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

该库为 UI 组件库，通过配置属性标签，实现对应的功能。

Name	Type	Description	Required	Platform	HarmonyOS Support
value	string	二维码的内容	no	iOS/Android	是
size	number	二维码尺寸	no	iOS/Android	是
bgColor	string	背景颜色	no	iOS/Android	是
fgColor	string	前景颜色	no	iOS/Android	是
onLoad	function	组件加载完成后调用	no	iOS/Android	是
onLoadEnd	function	组件加载完成后调用	no	iOS/Android	是

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。