React Native中的脏话过滤器
在这篇文章中，我们将看到一个有趣的库，它可以帮助您在 React Native 中创建一个亵渎过滤器 – 删除坏词。 我正在使用一款聊天应用程序，要求是与人们建立干净的社交联系，这里的“干净”一词意味着任何人都不应使用任何攻击性语言或任何词语。 作为开发人员，您只能指导用户，但无法阻止他们在聊天中使用此类词语，因此我借助了亵渎过滤器。
脏话过滤器可以帮助您删除坏词，它从句子中捕获坏词并用占位符替换它们。 如果您正在创建任何社交媒体应用程序/聊天或任何用户可以与他人分享内容的内容，那么您可以使用脏话过滤器来清除脏话。
在 React Native 中创建脏话过滤器非常简单，你只需要使用 bad-words 库，它直接提供了一个干净的函数。
推荐：如何解决Excel加载项错误无法启动此加载项
如何过滤脏话
要过滤坏词，您只需要导入依赖项并创建一个对象 筛选。 导入过滤器后，您可以使用 clean 功能来过滤坏词。
import Filter from 'bad-words';
const filter = new Filter();
filter.clean(inputValue)占位符覆盖
如果您想使用自己的占位符，则可以在初始化 Filter 时使用占位符。
const Filter = require('bad-words');
let customFilter = new Filter({ placeHolder: 'x'});
customFilter.clean("Don't be an ash0le"); //Don't be an xxxxxx将单词添加到黑名单
要将单词添加到黑名单，您可以传递多个单词 添加单词 功能。 如果您想使用数组，请使用扩展运算符。
const filter = new Filter();
filter.addWords('bad1', 'bad2', 'bad3');
filter.clean("hello bad1 bad2 bad3!")
//hello **** **** ****!
//or use an array using the spread operator
let newBadWords = ('bad1', 'bad2', 'bad3');
filter.addWords(...newBadWords);
filter.clean("hello bad1 bad2 bad3!")
//hello **** **** ****!
//or
const filter = new Filter({ list: ('bad1', 'bad2', 'bad3') });
filter.clean("hello bad1 bad2 bad3!")
//hello **** **** ****!使用空列表实例化
您可以清理完整列表并可以从初始开始
const filter = new Filter({ emptyList: true });
filter.clean("hell this wont clean anything");
//hell this wont clean anything从黑名单中删除单词
要从黑名单中删除任何单词，您可以使用 删除单词 功能。
const filter = new Filter();
filter.removeWords('bad1', 'bad2', 'bad3');
filter.clean("hello bad1 bad2 bad3!");
//hello bad1 bad2 bad3!
//or use an array using the spread operator
let removeWords = ('bad1', 'bad2', 'bad3');
filter.removeWords(...removeWords);
filter.clean("hello bad1 bad2 bad3!");
//hello bad1 bad2 bad3!脏话过滤器示例说明
在此示例中，我们将创建一个简单的输入，允许用户输入一些句子，这些句子将使用脏话过滤器进行过滤，如果我们的过滤器在句子中发现任何坏词，那么它将用 * 替换它（您也可以自定义* 随心所欲）。
让我们从一个例子开始。
制作 React Native 应用程序
React Native 入门将帮助您更多地了解如何制作 React Native 项目。 我们将使用 React Native 命令行界面来制作我们的 React Native 应用程序。
如果您之前安装了全局的react-native-cli软件包，请将其删除，因为它可能会导致意外问题：
npm uninstall -g react-native-cli @react-native-community/cli运行以下命令创建一个新的 React Native 项目
npx react-native init ProjectName如果你想使用特定的 React Native 版本启动一个新项目，你可以使用 –version 参数：
npx react-native init ProjectName --version X.XX.X注意如果上述命令失败，您可能使用的是旧版本 react-native 或者 react-native-cli 在您的电脑上全局安装。 尝试卸载 cli 并使用 npx 运行 cli。
这将在项目目录中创建一个带有名为 App.js 的索引文件的项目结构。
安装依赖项
使用 Filter 你需要安装 bad-words 依赖项并为此打开终端并使用跳转到项目
cd ProjectName运行以下命令
npm install --save bad-words此命令会将所有依赖项复制到您的 node_module 目录中。 –save 是可选的，它只是更新 package.json 文件中的依赖项。
在 React Native 中制作脏话过滤器的代码
在任何代码编辑器中打开 App.js 并将代码替换为以下代码
应用程序.js
// Profinity Filter in React Native - To Remove bad words
// https://aboutreact.com/react-native-profanity-filter/
// Import React
import React, {useState} from 'react';
// Import all the required components
import {
TextInput,
SafeAreaView,
View,
StyleSheet,
Text
} from 'react-native';
// Import profanity filter
import Filter from 'bad-words';
const App = () => {
let (inputValue, setInputValue) = useState('');
const filter = new Filter();
const handleInput = (value) => {
setInputValue(value);
};
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<Text style={styles.heading}>
Profinity Filter in React Native
{'\n'}
To Remove Bad Words
</Text>
<Text style={styles.insertedTextStyle}>
{inputValue ? filter.clean(inputValue) : ''}
</Text>
<TextInput
value={inputValue}
onChangeText={handleInput}
placeholder={'Pleas Enter any Value'}
style={styles.inputStyle}
/>
<Text style={styles.textStyle}>
Please insert any string with bad word in input {' '}
and you will see it filtered out
</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#ffffff',
padding: 16,
},
heading: {
fontSize: 22,
textAlign: 'center',
marginBottom: 16,
marginTop: 150,
},
textStyle: {
marginVertical: 10,
textAlign: 'center',
},
insertedTextStyle: {
fontSize: 16,
fontWeight: 'bold',
marginVertical: 20,
textAlign: 'center',
},
inputStyle: {
width: '100%',
height: 44,
padding: 10,
marginBottom: 10,
backgroundColor: '#ecf0f1',
},
});
export default App;运行 React Native 应用程序
再次打开终端并使用跳转到您的项目。
cd ProjectName1. 启动 Metro Bundler
首先，您需要启动 Metro，React Native 附带的 JavaScript 捆绑器。 要启动 Metro 捆绑程序，请运行以下命令
npx react-native start一旦您启动 Metro Bundler，它将永远在您的终端上运行，直到您将其关闭。 让 Metro Bundler 在自己的终端中运行。 打开一个新终端并运行该应用程序。
2.启动React Native应用程序
在 Android 虚拟设备或真实调试设备上运行项目
npx react-native run-android或在 iOS 模拟器上运行（仅限 macOS）
npx react-native run-ios输出截图
在线模拟器中的输出
这就是如何在 React Native 中制作脏话过滤器 – 删除脏话。 如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。 很快就会有更多帖子发布。
