论坛 › 知识问答 › ios - react native iOS 文本输入 : switching secureTextEntry switches font

菜鸟教程小白 发表于 2022-12-12 21:39:06

ios - react native iOS 文本输入 : switching secureTextEntry switches font

                                            <p><p>我想在 React Native <code>0.30.0</code> 的 TextInput 中实现显示密码功能。我在 TextInput 旁边实现了“眼睛”按钮，它改变了 <code>passwordHidden</code> 状态变量的状态。这是我的代码:</p>

<pre><code>...
&lt;View style={}&gt;
      &lt;TextInput
          autoCapitalize={&#39;none&#39;}
          autoCorrect={false}
          clearButtonMode={&#39;while-editing&#39;}
          style={}
          onChangeText={(password) =&gt; this.onPasswordChange(password)}
          value={this.state.password}
          secureTextEntry={this.state.passwordHidden}
          multiline={false}
          placeholder={Strings.password}
          underlineColorAndroid={Colors.surfacePrimary}
      /&gt;
      &lt;TouchableOpacity style={styles.showPasswordButton} onPress={this.onPressShowPassword}&gt;
          &lt;EntypoIcon color={Colors.surfacePrimary} name={this.state.passwordHidden ? &#39;eye&#39; : &#39;eye-with-line&#39;} size={20} /&gt;
      &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
...
onPressShowPassword: function () {
    var previousState = this.state.passwordHidden;
    requestAnimationFrame(() =&gt; {
      this.setState({
             passwordHidden: !previousState,
      });
    });
},
</code></pre>

<p>这是密码 <code>TextInput</code> 在点击按钮之前的样子。
<a href="/image/YkeZL.png" rel="noreferrer noopener nofollow"><img src="/image/YkeZL.png" alt="enter image description here"/></a>
点击后:
<a href="/image/TJ83S.png" rel="noreferrer noopener nofollow"><img src="/image/TJ83S.png" alt="enter image description here"/></a>
当我第三次点击并开始输入时，密码会立即被清除。即使在整个应用程序中，我也不会更改 fontFamily 的样式。</p>

<p><strong>谁能解释发生了什么？或者只是如何克服这种烦人的行为。</strong></p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>对我有用的解决方法是在用户单击显示/隐藏密码时从 TextInput 中移除焦点。一种方法是在 TextInput 中添加 ref(例如 <code>ref="password"</code>)，然后调用 <code>this.refs.password.blur()</code></p></p>
                                   
                                                <p style="font-size: 20px;">关于ios -reactnativeiOS 文本输入 : switching secureTextEntry switches font，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/38707865/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/38707865/
                                                        </a>
                                                </p>
                                       

查看完整版本: ios - react native iOS 文本输入 : switching secureTextEntry switches font