在前端开发中，有时需要实现输入标签的功能，这时候一个好用的标签输入框组件就非常有用了。而 @cutii/react-native-tag-input 就是一款好用的 React Native 标签输入框组件。本文将详细介绍如何使用该组件完成标签输入功能。
安装
首先，在终端中进入项目目录，执行以下命令安装该组件：
npm install @cutii/react-native-tag-input --save
导入组件
在需要使用的文件中导入 @cutii/react-native-tag-input 组件：
import TagInput from '@cutii/react-native-tag-input';
参数
@cutii/react-native-tag-input 组件支持以下参数：
initialTags: 初始标签数组；onChangeTags: 标签变化时的回调函数；label: 标签文本；tagStyle: 标签样式；inputStyle: 输入框样式；onBlur: 输入框失去焦点时的回调函数；onFocus: 输入框获得焦点时的回调函数；maxTags: 最多可添加标签数量限制；textColor: 输入文本颜色；backColor: 输入框背景颜色；placeholder: 输入框占位符文本；onChangeText: 输入框文本变化时的回调函数。
下面将详细介绍各参数的作用。
initialTags
initialTags 参数是用来设置组件初始的标签数组，该数组中的元素为对象，每个对象包含两个属性：id 表示标签 id，name 表示标签文本。示例代码：
const initialTags = [
{id: 1, name: 'react'},
{id: 2, name: 'node.js'}
];onChangeTags
onChangeTags 参数是一个回调函数，用来监听标签数组变化的事件。该函数带有一个参数 tags，表示当前的标签数组。示例代码：
const onChangeTags = (tags) => {
console.log(tags);
}label
label 参数是用来设置标签文本的，可以是字符串或组件。默认值为 "标签"。示例代码：
const label = "自定义标签名："; // 或 <Text>自定义标签名：</Text>
tagStyle
tagStyle 参数是用来设置标签样式的，可以是对象或样式表。示例代码：
const tagStyle = {
backgroundColor: '#f1f1f1',
padding: 10,
borderRadius: 10,
margin: 5
};inputStyle
inputStyle 参数是用来设置输入框样式的，可以是对象或样式表。示例代码：
-- -------------------- ---- ------- ----- ---------- - - ------ ------- ---------------- ------- ------------ -- ------------ ------- ------------- --- -------- --- ------- --- ------- -- --
onBlur
onBlur 参数是输入框失去焦点时的回调函数。示例代码：
const onBlur = () => {
console.log('输入框失去焦点');
}onFocus
onFocus 参数是输入框获得焦点时的回调函数。示例代码：
const onFocus = () => {
console.log('输入框获得焦点');
}maxTags
maxTags 参数用来限制输入的标签数量，该参数需要传入一个整数类型的值。示例代码：
const maxTags = 3;
textColor
textColor 参数用来设置输入框文字颜色。示例代码：
const textColor = '#333';
backColor
backColor 参数用来设置输入框背景颜色。示例代码：
const backColor = '#fff';
placeholder
placeholder 参数用来设置输入框占位符文本。示例代码：
const placeholder = '输入标签名...';
onChangeText
onChangeText 参数是输入框文本变化时的回调函数，该函数带有一个参数 text，表示当前输入框的文本内容。示例代码：
const onChangeText = (text) => {
console.log(text);
}示例代码
下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ---- ---------------
------ -------- ---- --------------------------------
----- ----------- - -
---- -- ----- ---------
---- -- ----- -----------
---- -- ----- ----------
--
----- ------------ - ------ -- -
------------------
-
----- ----- - ----------
----- -------- - -
---------------- ----------
-------- ---
------------- ---
------- -
--
----- ---------- - -
------ -------
---------------- -------
------------ --
------------ -------
------------- ---
-------- ---
------- ---
------- --
--
----- ------ - -- -- -
-----------------------
-
----- ------- - -- -- -
-----------------------
-
----- ------- - --
----- --------- - -------
----- --------- - -------
----- ----------- - -----------
----- ------------ - ------ -- -
------------------
-
----- --------------- - -- -- -
------ -
------
---------
-------------------------
---------------------------
-------------
-------------------
-----------------------
---------------
-----------------
-----------------
---------------------
---------------------
-------------------------
---------------------------
--
-------
--
-
------ ------- ----------------总结
@cutii/react-native-tag-input 是一款非常好用的标签输入组件，可以快速地实现标签选择的功能，对于需要实现该功能的开发者非常有帮助。同时，本文详细地介绍了该组件的使用方法和参数含义，并给出了示例代码，希望能够为读者提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005680481e8991b448e426f