Реагировать на собственный SecureTextEntry не работает на Android

Я пытаюсь использовать react-native 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 работал, а другой нет, поскольку оба они были идентичными, за исключением значения. может ли кто-нибудь объяснить, почему это могло произойти,

благодаря.

Является ли InputBox вашим пользовательским компонентом?

— 14.02.2019 09:34

да, приведенный ниже textInput - это компонент ввода текста, который находится в коде InputBox

— 14.02.2019 09:49

android react-native textinput

14.02.2019 08:03

Коллекции (ArrayList , HashSet , HashMap)

8 549

Ответы 5

Я не знаю, почему это происходит в вашем коде. Я пробовал ваш код, он отлично работает в моем эмуляторе Android. Вместо этого я столкнулся с проблемой при обновлении свойства «цвет» в теневом узле типа: 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>
    );
  }
}

Я смог решить свою проблему, удалив опору keyboardType. я обновил свой вопрос.

— 14.02.2019 18:43

14.02.2019 11:03

multiline = {true} или keyboardType = {'visible-password'} запрещают работу secureTextEntry.

10.12.2019 22:33

делай keyboardType = "default" и все получится. Это сработало для меня.

15.03.2020 15:53

keyboardType = "default" Working Fine.
secureTextEntry = {hidePassword}

  <TextInput
                        style = {[styles.textInput]}
                        placeholder = ""
                        secureTextEntry = {hidePassword}
                        selectionColor = {'#000'}
                        editable = {true}
                        returnKeyType = {'next'}
                        keyboardType = "default"
                        autoFocus = {false}
                        autoCapitalize = {'characters'}
                        placeholderTextColor = "rgb(153,153,153)"
                        onChangeText = {(text) => this.onCurrentPassTextChange(text)}
                      >{currentPassword}</TextInput>

14.04.2020 15:59

эта работа для меня:

secureTextEntry works if you set autoCapitalize = {'none'}.

https://github.com/facebook/react-native/issues/30148#issuecomment-748288773

09.09.2021 02:29