推荐开源项目:React Native Tag Input - 灵活易用的标签输入组件
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import TagInput from 'react-native-tag-input'; // 导入TagInput组件
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
tags: [], // 初始化标签数组
};
}
// 处理标签改变的函数
handleTagChange = (tag) => {
this.setState({ tags: tag });
};
render() {
return (
<View style={styles.container}>
<TagInput
tags={this.state.tags} // 绑定标签数组
onChange={this.handleTagChange} // 绑定标签改变的处理函数
placeholder="添加标签" // 设置占位符文本
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 10,
},
});
这段代码展示了如何在React Native应用中集成react-native-tag-input
组件,并在用户添加或删除标签时更新状态。这是一个简单的例子,但在实际应用中,你可能需要添加额外的功能,例如验证输入的标签或处理错误情况。
评论已关闭