React Native iOS TextInput：切換secureTextEntry開關字體

我想在React Native 0.30.0的TextInput中實現show password功能。我已經實現了TextInput旁邊的'eye'按鈕，它改變了狀態變量passwordHidden的狀態。這裏是我的代碼：React Native iOS TextInput：切換secureTextEntry開關字體

... 
    <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。

任何人都可以解釋發生了什麼？或者只是如何克服這種煩人的行爲。

來源

2016-08-01 matusalem

我之前遇到過這個問題。這是一個開放的React Native錯誤 - 雖然問題似乎已經過早地被關閉了：https://github.com/facebook/react-native/issues/5859 – jevakallio

另外，被清除的值似乎也被報告了https://github.com/facebook/react-native/issues/9148 – jevakallio

解決方法正在爲我工作，當用戶單擊顯示/隱藏密碼時，將從TextInput中移除焦點。一種方法是將ref（例如ref="password"）添加到您的TextInput中，然後調用this.refs.password.blur()

來源

2017-04-13 13:30:41 Urska

React Native iOS TextInput：切換secureTextEntry開關字體

回答

相關問題