我想在 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 在点击按钮之前的样子。
点击后:
当我第三次点击并开始输入时,密码会立即被清除。即使在整个应用程序中,我也不会更改 fontFamily 的样式。
谁能解释发生了什么?或者只是如何克服这种烦人的行为。
Best Answer-推荐答案 strong>
对我有用的解决方法是在用户单击显示/隐藏密码时从 TextInput 中移除焦点。一种方法是在 TextInput 中添加 ref(例如 ref="password" ),然后调用 this.refs.password.blur()
关于ios - react native iOS 文本输入 : switching secureTextEntry switches font,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/38707865/
|