реагировать родной secureTextEntry не работает на Android - PullRequest
Новая
       11

реагировать родной secureTextEntry не работает на Android

0 голосов
/ 14 февраля 2019

Я пытаюсь использовать реактивный родной secureTextEntry, чтобы скрыть свой пароль и подтвердить поля пароля при регистрации. Я использую пользовательский компонент InputBox для textInput. Ниже приведен мой код, 

                <InputBox 
                error={this.state.PwordError} 
                keyboardType={'default'} 
                onChangeText={Pword =>
                    this.setState({
                        Pword
                    })
                } 
                secureTextEntry={true}
                value={this.state.Pword} 
                pHolder={"Password"} 
                color={'white'} />
            <View style={styles.spacer} />
            <InputBox 
                error={this.state.CPwordError} 
                keyboardType={'default'} 
                onChangeText={CPword =>
                    this.setState({
                        CPword
                    })
                } 
                secureTextEntry={true}
                value={this.state.CPword} 
                pHolder={"Confirm Password"} 
                color={'white'} />

Первое текстовое поле работает нормально при вводе пароля, оно отображается в виде точек, но поле подтверждения пароля не работает.у кого-нибудь есть идея, почему это может произойти?

Это поле ввода, которое обозначено приведенным выше кодом 

            <TextInput 
                    underlineColorAndroid="transparent"
                    placeholder={this.props.pHolder} 
                    placeholderTextColor={this.props.color === 'white' ? 'black':"white" } 
                    {...this.props}
                    style={this.props.color == 'white' ? styles.ReginputStyle : styles.inputStyle} 

                    />

, который я использую, 

"react": "16.5.0",
"react-native": "0.57.1",

Мне удалось это исправить, удалив код keyboardType={'default'} из моего компонента ввода.Несмотря на то, что проблема решена, я хотел бы знать, почему первый блок secureTextEntry работал, а другой - нет, поскольку оба они были идентичны, за исключением значения.может ли кто-нибудь объяснить причину, по которой это могло произойти,

спасибо.

1 Ответ

0 голосов
/ 14 февраля 2019

Я не знаю, почему это происходит в вашем коде. Я пробовал ваш код, он отлично работает в моем эмуляторе Android.Вместо этого я столкнулся с проблемой при обновлении свойства "color" в теневом узле типа: AndroidTextInput.Потому что требуется время, чтобы оценить ваш

. Для этого я удалил эту строку, кроме этой, она прекрасно работает.

import React, { Component } from "react";
import { View, Text, TouchableOpacity, TextInput } from "react-native";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { CPwordError: "", CPword: "", PwordError: "", Pword: "" };
  }

  render() {
    return (
      <View>
        <InputBox
          error={this.state.PwordError}
          keyboardType={"default"}
          onChangeText={Pword =>
            this.setState({
              Pword
            })
          }
          secureTextEntry={true}
          value={this.state.Pword}
          pHolder={"Password"}
          // color={"white"}
        />

        <InputBox
          error={this.state.CPwordError}
          keyboardType={"default"}
          onChangeText={CPword =>
            this.setState({
              CPword
            })
          }
          secureTextEntry={true}
          value={this.state.CPword}
          pHolder={"Confirm Password"}
          // color={"white"}
        />
      </View>
    );
  }
}

class InputBox extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View>
        <TextInput
          underlineColorAndroid="transparent"
          placeholder={this.props.pHolder}
          placeholderTextColor={"black"}
          {...this.props}
          style={this.props.color == "white"}
        />
      </View>
    );
  }
}
...