React Native iOS TextInput：切换secureTextEntry切换字体

Question

我想在React Native 0.30.0中的TextInput中实现show password功能。我实施了眼睛＆＃39; 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。

任何人都可以解释发生了什么？或者只是如何克服这种恼人的行为。

Answer 1

对我来说，解决方法是在用户点击显示/隐藏密码时从TextInput中删除焦点。一种方法是将ref（例如ref="password"）添加到TextInput，然后调用this.refs.password.blur()

Answer 2

更改fontSize对我有用：

fontSize: (this.state.showPassword) ? 24 : 23