Question

我将react-native-paper用于Text Input，并使用KeyboardAvoidingView删除keyboard issues并将Input字段放在KeyBoard上方，这是为其他TextInput字段工作，而不是密码字段，但是，当我删除secureTextEntry={true}时，这在android上可以正常工作，但这不是解决方案，因为此行在Password字段中是必需的。我还尝试了许多类似react-native-keyboard-aware-scroll-view

的库

    /* @flow */

import * as React from 'react';
import {
  StyleSheet,
  ScrollView,
  KeyboardAvoidingView,
} from 'react-native';
import { TextInput, Button} from 'react-native-paper';


export default class App extends React.Component {
  static title = 'TextInput';

  state = {
    name: '',
    lastName:'',
    phone:'',
    email:'',
    states:'',
    password:'',
    repeatPassword:'',
  };

  render() {

    return (
      <KeyboardAvoidingView
        style={styles.wrapper}
        behavior="padding"
        keyboardVerticalOffset={80}
      >
        <ScrollView
          style={[styles.container, { backgroundColor: '#bdda' }]}
          keyboardShouldPersistTaps={'always'}
          removeClippedSubviews={false}
        >
          <TextInput
            style={styles.inputContainerStyle}
            label="First Name"
            placeholder="Type First Name"
            value={this.state.name}
            onChangeText={name => this.setState({ name })}
            returnKeyType={"next"}
            onSubmitEditing={() => { this.lastName.focus() }}
            blurOnSubmit={false}
          />

          <TextInput
            style={styles.inputContainerStyle}
            label="Last Name"
            placeholder="Type Last Name"
            value={this.state.lastName}
            onChangeText={lastName => this.setState({ lastName })}
            ref={(input) => { this.lastName = input; }}
            onSubmitEditing={() => { this.phone.focus() }}
            returnKeyType={"next"}
            blurOnSubmit={false}
          />

          <TextInput
            style={styles.inputContainerStyle}
            label="Phone"
            placeholder="Type Phone"
            value={this.state.phone}
            onChangeText={phone => this.setState({ phone })}
            ref={(input) => { this.phone = input; }}
            onSubmitEditing={() => { this.email.focus() }}
            returnKeyType={"next"}
            blurOnSubmit={false}
          />

          <TextInput
            style={styles.inputContainerStyle}
            label="Email"
            placeholder="Type Email"
            value={this.state.email}
            onChangeText={email => this.setState({ email })}
            ref={(input) => { this.email = input; }}
            onSubmitEditing={() => { this.states.focus() }}
            returnKeyType={"next"}
            blurOnSubmit={false}

          />

          <TextInput
            style={styles.inputContainerStyle}
            label="State"
            placeholder="Type State"
            value={this.state.states}
            onChangeText={states => this.setState({ states })}
            ref={(input) => { this.states = input; }}
            onSubmitEditing={() => { this.password.focus() }}
            returnKeyType={"next"}
            blurOnSubmit={false}
          />

          <TextInput
            style={styles.inputContainerStyle}
            label="Password"
            placeholder="Type Password"
            secureTextEntry={true}
            value={this.state.password}
            onChangeText={password => this.setState({ password })}
            ref={(input) => { this.password = input; }}
            onSubmitEditing={() => { this.repeatPassword.focus() }}
            returnKeyType={"next"}
            blurOnSubmit={false}
          />

          <TextInput
            style={styles.inputContainerStyle}
            label="Repeat Password"
            placeholder="Type Repeat Password"
            secureTextEntry={true}
            value={this.state.repeatPassword}
            onChangeText={repeatPassword => this.setState({ repeatPassword })}
            ref={(input) => { this.repeatPassword = input; }}
            returnKeyType={"done"}
            blurOnSubmit={true}
          />

          <Button onPress={() => alert('I am pressed :P-')} style={{marginTop:20}}>
              Submit
            </Button>
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 25,
    marginTop:40,
  },
  wrapper: {
    flex: 1,
  },
  inputContainerStyle: {
    margin: 8,
  },
});

要检查此问题，我还创建了Demo Project，此问题仅在Android中，在下方的屏幕截图Password text fields中处于活动状态，但密码字段已隐藏，。

Answer 1

有同样的问题。我仅在重点输入密码时才将secureTextEntry属性设置为true来进行管理。

 const [secureTextEntry, setSecureTextEntry] = useState(false)

 ...

<TextInput
     style={styles.inputContainerStyle}
     label="Repeat Password"
     placeholder="Type Repeat Password"
     secureTextEntry={secureTextEntry}
     value={this.state.repeatPassword}
     onFocus={() => setSecureTextEntry(true)}
     onChangeText={repeatPassword => this.setState({ repeatPassword })}
     ref={(input) => { this.repeatPassword = input; }}
     returnKeyType={"done"}
     blurOnSubmit={true}
 />

KeyboardAvoidingView不能与TextInput密码字段一起正常使用

1 个答案: