• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

[复制链接]
菜鸟教程小白 发表于 2022-12-12 21:39:06 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

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

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

这是密码 TextInput 在点击按钮之前的样子。 enter image description here 点击后: enter image description here 当我第三次点击并开始输入时,密码会立即被清除。即使在整个应用程序中,我也不会更改 fontFamily 的样式。

谁能解释发生了什么?或者只是如何克服这种烦人的行为。



Best Answer-推荐答案


对我有用的解决方法是在用户单击显示/隐藏密码时从 TextInput 中移除焦点。一种方法是在 TextInput 中添加 ref(例如 ref="password"),然后调用 this.refs.password.blur()

关于ios - react native iOS 文本输入 : switching secureTextEntry switches font,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38707865/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap