如何在反应本机键盘中禁用表情符号按钮

我需要为我的反应本机键盘应用程序禁用表情符号。当我的键盘出现时，表情符号图标是可见的，我需要使其不可用以防止用户在文本中插入表情符号。

有什么建议吗？

禁用表情符号的确切方法是为iOS设置">ascii-able"，为Android设置">可见密码"以文本输入道具键盘类型。

<TextInput
    keyboardType={Platform.OS === 'ios' ? 'ascii-capable' : 'visible-password'}
/>

这是我在尝试此问题时得到的：

keyboardType="ascii-ableable"在Android上不起作用，因为它特定于iOS，仅符合 https://facebook.github.io/react-native/docs/textinput#keyboardtype
使用键盘类型="电子邮件地址"不会隐藏Android上每个键盘中的表情符号按钮

我对上述限制的解决方案是删除可能输入的任何表情符号字符。为此，我做了以下工作：

搜索涵盖大多数表情符号Unicode的正则表达式。在尝试了一些正则表达式之后，我最终使用了这个 https://github.com/mathiasbynens/emoji-regex。它并不完美，但它涵盖了大多数表情符号。
创建一个每次输入新值时运行的函数
使用文本输入值属性中的函数

功能：

 const removeEmojis = (string) => {
  // emoji regex from the emoji-regex library
  const regex = /uD83CuDFF4(?:uDB40uDC67uDB40uDC62(?:uDB40uDC65uDB40uDC6EuDB40uDC67|uDB40uDC77uDB40uDC6CuDB40uDC73|uDB40uDC73uDB40uDC63uDB40uDC74)uDB40uDC7F|u200Du2620uFE0F)|uD83DuDC69u200DuD83DuDC69u200D(?:uD83DuDC66u200DuD83DuDC66|uD83DuDC67u200D(?:uD83D[uDC66uDC67]))|uD83DuDC68(?:u200D(?:u2764uFE0Fu200D(?:uD83DuDC8Bu200D)?uD83DuDC68|(?:uD83D[uDC68uDC69])u200D(?:uD83DuDC66u200DuD83DuDC66|uD83DuDC67u200D(?:uD83D[uDC66uDC67]))|uD83DuDC66u200DuD83DuDC66|uD83DuDC67u200D(?:uD83D[uDC66uDC67])|uD83C[uDF3EuDF73uDF93uDFA4uDFA8uDFEBuDFED]|uD83D[uDCBBuDCBCuDD27uDD2CuDE80uDE92]|uD83E[uDDB0-uDDB3])|(?:uD83C[uDFFB-uDFFF])u200D(?:uD83C[uDF3EuDF73uDF93uDFA4uDFA8uDFEBuDFED]|uD83D[uDCBBuDCBCuDD27uDD2CuDE80uDE92]|uD83E[uDDB0-uDDB3]))|uD83DuDC69u200D(?:u2764uFE0Fu200D(?:uD83DuDC8Bu200D(?:uD83D[uDC68uDC69])|uD83D[uDC68uDC69])|uD83C[uDF3EuDF73uDF93uDFA4uDFA8uDFEBuDFED]|uD83D[uDCBBuDCBCuDD27uDD2CuDE80uDE92]|uD83E[uDDB0-uDDB3])|uD83DuDC69u200DuD83DuDC66u200DuD83DuDC66|(?:uD83DuDC41uFE0Fu200DuD83DuDDE8|uD83DuDC69(?:uD83C[uDFFB-uDFFF])u200D[u2695u2696u2708]|uD83DuDC68(?:(?:uD83C[uDFFB-uDFFF])u200D[u2695u2696u2708]|u200D[u2695u2696u2708])|(?:(?:u26F9|uD83C[uDFCBuDFCC]|uD83DuDD75)uFE0F|uD83DuDC6F|uD83E[uDD3CuDDDEuDDDF])u200D[u2640u2642]|(?:u26F9|uD83C[uDFCBuDFCC]|uD83DuDD75)(?:uD83C[uDFFB-uDFFF])u200D[u2640u2642]|(?:uD83C[uDFC3uDFC4uDFCA]|uD83D[uDC6EuDC71uDC73uDC77uDC81uDC82uDC86uDC87uDE45-uDE47uDE4BuDE4DuDE4EuDEA3uDEB4-uDEB6]|uD83E[uDD26uDD37-uDD39uDD3DuDD3EuDDB8uDDB9uDDD6-uDDDD])(?:(?:uD83C[uDFFB-uDFFF])u200D[u2640u2642]|u200D[u2640u2642])|uD83DuDC69u200D[u2695u2696u2708])uFE0F|uD83DuDC69u200DuD83DuDC67u200D(?:uD83D[uDC66uDC67])|uD83DuDC69u200DuD83DuDC69u200D(?:uD83D[uDC66uDC67])|uD83DuDC68(?:u200D(?:(?:uD83D[uDC68uDC69])u200D(?:uD83D[uDC66uDC67])|uD83D[uDC66uDC67])|uD83C[uDFFB-uDFFF])|uD83CuDFF3uFE0Fu200DuD83CuDF08|uD83DuDC69u200DuD83DuDC67|uD83DuDC69(?:uD83C[uDFFB-uDFFF])u200D(?:uD83C[uDF3EuDF73uDF93uDFA4uDFA8uDFEBuDFED]|uD83D[uDCBBuDCBCuDD27uDD2CuDE80uDE92]|uD83E[uDDB0-uDDB3])|uD83DuDC69u200DuD83DuDC66|uD83CuDDF6uD83CuDDE6|uD83CuDDFDuD83CuDDF0|uD83CuDDF4uD83CuDDF2|uD83DuDC69(?:uD83C[uDFFB-uDFFF])|uD83CuDDED(?:uD83C[uDDF0uDDF2uDDF3uDDF7uDDF9uDDFA])|uD83CuDDEC(?:uD83C[uDDE6uDDE7uDDE9-uDDEEuDDF1-uDDF3uDDF5-uDDFAuDDFCuDDFE])|uD83CuDDEA(?:uD83C[uDDE6uDDE8uDDEAuDDECuDDEDuDDF7-uDDFA])|uD83CuDDE8(?:uD83C[uDDE6uDDE8uDDE9uDDEB-uDDEEuDDF0-uDDF5uDDF7uDDFA-uDDFF])|uD83CuDDF2(?:uD83C[uDDE6uDDE8-uDDEDuDDF0-uDDFF])|uD83CuDDF3(?:uD83C[uDDE6uDDE8uDDEA-uDDECuDDEEuDDF1uDDF4uDDF5uDDF7uDDFAuDDFF])|uD83CuDDFC(?:uD83C[uDDEBuDDF8])|uD83CuDDFA(?:uD83C[uDDE6uDDECuDDF2uDDF3uDDF8uDDFEuDDFF])|uD83CuDDF0(?:uD83C[uDDEAuDDEC-uDDEEuDDF2uDDF3uDDF5uDDF7uDDFCuDDFEuDDFF])|uD83CuDDEF(?:uD83C[uDDEAuDDF2uDDF4uDDF5])|uD83CuDDF8(?:uD83C[uDDE6-uDDEAuDDEC-uDDF4uDDF7-uDDF9uDDFBuDDFD-uDDFF])|uD83CuDDEE(?:uD83C[uDDE8-uDDEAuDDF1-uDDF4uDDF6-uDDF9])|uD83CuDDFF(?:uD83C[uDDE6uDDF2uDDFC])|uD83CuDDEB(?:uD83C[uDDEE-uDDF0uDDF2uDDF4uDDF7])|uD83CuDDF5(?:uD83C[uDDE6uDDEA-uDDEDuDDF0-uDDF3uDDF7-uDDF9uDDFCuDDFE])|uD83CuDDE9(?:uD83C[uDDEAuDDECuDDEFuDDF0uDDF2uDDF4uDDFF])|uD83CuDDF9(?:uD83C[uDDE6uDDE8uDDE9uDDEB-uDDEDuDDEF-uDDF4uDDF7uDDF9uDDFBuDDFCuDDFF])|uD83CuDDE7(?:uD83C[uDDE6uDDE7uDDE9-uDDEFuDDF1-uDDF4uDDF6-uDDF9uDDFBuDDFCuDDFEuDDFF])|[#*0-9]uFE0Fu20E3|uD83CuDDF1(?:uD83C[uDDE6-uDDE8uDDEEuDDF0uDDF7-uDDFBuDDFE])|uD83CuDDE6(?:uD83C[uDDE8-uDDECuDDEEuDDF1uDDF2uDDF4uDDF6-uDDFAuDDFCuDDFDuDDFF])|uD83CuDDF7(?:uD83C[uDDEAuDDF4uDDF8uDDFAuDDFC])|uD83CuDDFB(?:uD83C[uDDE6uDDE8uDDEAuDDECuDDEEuDDF3uDDFA])|uD83CuDDFE(?:uD83C[uDDEAuDDF9])|(?:uD83C[uDFC3uDFC4uDFCA]|uD83D[uDC6EuDC71uDC73uDC77uDC81uDC82uDC86uDC87uDE45-uDE47uDE4BuDE4DuDE4EuDEA3uDEB4-uDEB6]|uD83E[uDD26uDD37-uDD39uDD3DuDD3EuDDB8uDDB9uDDD6-uDDDD])(?:uD83C[uDFFB-uDFFF])|(?:u26F9|uD83C[uDFCBuDFCC]|uD83DuDD75)(?:uD83C[uDFFB-uDFFF])|(?:[u261Du270A-u270D]|uD83C[uDF85uDFC2uDFC7]|uD83D[uDC42uDC43uDC46-uDC50uDC66uDC67uDC70uDC72uDC74-uDC76uDC78uDC7CuDC83uDC85uDCAAuDD74uDD7AuDD90uDD95uDD96uDE4CuDE4FuDEC0uDECC]|uD83E[uDD18-uDD1CuDD1EuDD1FuDD30-uDD36uDDB5uDDB6uDDD1-uDDD5])(?:uD83C[uDFFB-uDFFF])|(?:[u231Au231Bu23E9-u23ECu23F0u23F3u25FDu25FEu2614u2615u2648-u2653u267Fu2693u26A1u26AAu26ABu26BDu26BEu26C4u26C5u26CEu26D4u26EAu26F2u26F3u26F5u26FAu26FDu2705u270Au270Bu2728u274Cu274Eu2753-u2755u2757u2795-u2797u27B0u27BFu2B1Bu2B1Cu2B50u2B55]|uD83C[uDC04uDCCFuDD8EuDD91-uDD9AuDDE6-uDDFFuDE01uDE1AuDE2FuDE32-uDE36uDE38-uDE3AuDE50uDE51uDF00-uDF20uDF2D-uDF35uDF37-uDF7CuDF7E-uDF93uDFA0-uDFCAuDFCF-uDFD3uDFE0-uDFF0uDFF4uDFF8-uDFFF]|uD83D[uDC00-uDC3EuDC40uDC42-uDCFCuDCFF-uDD3DuDD4B-uDD4EuDD50-uDD67uDD7AuDD95uDD96uDDA4uDDFB-uDE4FuDE80-uDEC5uDECCuDED0-uDED2uDEEBuDEECuDEF4-uDEF9]|uD83E[uDD10-uDD3AuDD3C-uDD3EuDD40-uDD45uDD47-uDD70uDD73-uDD76uDD7AuDD7C-uDDA2uDDB0-uDDB9uDDC0-uDDC2uDDD0-uDDFF])|(?:[#*0-9xA9xAEu203Cu2049u2122u2139u2194-u2199u21A9u21AAu231Au231Bu2328u23CFu23E9-u23F3u23F8-u23FAu24C2u25AAu25ABu25B6u25C0u25FB-u25FEu2600-u2604u260Eu2611u2614u2615u2618u261Du2620u2622u2623u2626u262Au262Eu262Fu2638-u263Au2640u2642u2648-u2653u265Fu2660u2663u2665u2666u2668u267Bu267Eu267Fu2692-u2697u2699u269Bu269Cu26A0u26A1u26AAu26ABu26B0u26B1u26BDu26BEu26C4u26C5u26C8u26CEu26CFu26D1u26D3u26D4u26E9u26EAu26F0-u26F5u26F7-u26FAu26FDu2702u2705u2708-u270Du270Fu2712u2714u2716u271Du2721u2728u2733u2734u2744u2747u274Cu274Eu2753-u2755u2757u2763u2764u2795-u2797u27A1u27B0u27BFu2934u2935u2B05-u2B07u2B1Bu2B1Cu2B50u2B55u3030u303Du3297u3299]|uD83C[uDC04uDCCFuDD70uDD71uDD7EuDD7FuDD8EuDD91-uDD9AuDDE6-uDDFFuDE01uDE02uDE1AuDE2FuDE32-uDE3AuDE50uDE51uDF00-uDF21uDF24-uDF93uDF96uDF97uDF99-uDF9BuDF9E-uDFF0uDFF3-uDFF5uDFF7-uDFFF]|uD83D[uDC00-uDCFDuDCFF-uDD3DuDD49-uDD4EuDD50-uDD67uDD6FuDD70uDD73-uDD7AuDD87uDD8A-uDD8DuDD90uDD95uDD96uDDA4uDDA5uDDA8uDDB1uDDB2uDDBCuDDC2-uDDC4uDDD1-uDDD3uDDDC-uDDDEuDDE1uDDE3uDDE8uDDEFuDDF3uDDFA-uDE4FuDE80-uDEC5uDECB-uDED2uDEE0-uDEE5uDEE9uDEEBuDEECuDEF0uDEF3-uDEF9]|uD83E[uDD10-uDD3AuDD3C-uDD3EuDD40-uDD45uDD47-uDD70uDD73-uDD76uDD7AuDD7C-uDDA2uDDB0-uDDB9uDDC0-uDDC2uDDD0-uDDFF])uFE0F|(?:[u261Du26F9u270A-u270D]|uD83C[uDF85uDFC2-uDFC4uDFC7uDFCA-uDFCC]|uD83D[uDC42uDC43uDC46-uDC50uDC66-uDC69uDC6EuDC70-uDC78uDC7CuDC81-uDC83uDC85-uDC87uDCAAuDD74uDD75uDD7AuDD90uDD95uDD96uDE45-uDE47uDE4B-uDE4FuDEA3uDEB4-uDEB6uDEC0uDECC]|uD83E[uDD18-uDD1CuDD1EuDD1FuDD26uDD30-uDD39uDD3DuDD3EuDDB5uDDB6uDDB8uDDB9uDDD1-uDDDD])/g
  return string.replace(regex, '')
}

文本输入

render() {
    return(
        <TextInput
            onChangeText={(text) => this.setState({text})}
            value={removeEmojis(this.state.text)}
         />
    )
}

TextInput 有一个 keyboardType 属性，可让您解决此问题。但是Android和ios处理它的方式不同。这就是在两个平台上对我有用的方法。

<TextInput keyboardType={Platform.OS === 'android' ? 'email-address' : 'ascii-capable'} ... />

您可以

尝试使用TextIput中的keyboardType="ascii-capable"，以隐藏键盘上的表情符号选项，例如：

<TextInput keyboardType="ascii-capable" ... />

让我知道这是否适合您。

相关内容

最新更新

热门标签：