следующий и перейдите в форму не работают (React Native и native-base)

Я использую форму native-base для обработки имени пользователя и пароля пользователя.

Когда я нажимаю далее или перейти с клавиатуры, курсор не перемещается к следующему или не отправляет ввод. Как мы можем это исправить?

import { Form } from 'native-base';
<Form style={styles.formStyle}>
    <AuthFieldInput
        placeholder="Username or Email"
        value={this.state.username}
        onChangeText={username => this.setState({username})}
        returnKeyType="next"/>
    <AuthFieldInput
        placeholder="Password"
        value={this.state.password}
        onChangeText={password => this.setState({password})}
        secureTextEntry
        returnKeyType="go"/>
</Form>

Вот функция рендеринга <AuthField>

import { Item, Label, Input, Text } from 'native-base';
<Item>
  <Input
    value={value}
    onChangeText={onChangeText}
    placeholder={placeholder}
    autoCorrect={false}
    secureTextEntry={secureTextEntry}
    returnKeyType={returnKeyType}
  />
</Item>

Благодарю вас!


react-native native-base
person hellofanengineer    schedule 19.12.2017    source источник
comment
Судя по документам нативной базы, returnKeyType не поддерживается.   -  person ShaneG    schedule 19.12.2017
comment
Спасибо, что указали! Но Input нативной базы наследуется от TextInput. facebook.github.io/react-native/docs/ docs.nativebase.io/Components.html#Form   -  person hellofanengineer    schedule 19.12.2017
comment
Ах, я вижу это сейчас. тогда это странно   -  person ShaneG    schedule 19.12.2017

Ответы (3)


arrow_upward
1
arrow_downward

По сути, это оболочка TextInput из React Native, если вы хотите сделать так, чтобы при нажатии кнопки «Далее» перейти к другому входу, вы должны сделать следующее.

// <AuthField> render function
<Item>
    <Input
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        autoCorrect={false}
        secureTextEntry={secureTextEntry}
        returnKeyType={returnKeyType}
        { ...this.props }
    />
</Item>

И в вашем компоненте вы можете использовать его следующим образом:

// Other render
<Form style={styles.formStyle}>
    <AuthFieldInput
        placeholder="Username or Email"
        value={this.state.username}
        onChangeText={username => this.setState({username})}
        returnKeyType="next"
        onSubmitEditing={() => { 
            this.refs.passwowrd.focus(); 
        }}
    />
    <AuthFieldInput
        ref='password'
        placeholder="Password"
        value={this.state.password}
        onChangeText={password => this.setState({password})}
        secureTextEntry
        returnKeyType="go"
        />
</Form>

Обновление: ознакомьтесь с документацией по этой функции https://facebook.github.io/react-native/docs/textinput.html#onsubmitediting

person Joel Jaime    schedule 19.12.2017

arrow_upward
4
arrow_downward

Я получал сообщение об ошибке, поскольку «_this2.refs.password.focus» не является функцией onSubmitEditing TextInput.

Вот как я это исправил:

  • Пакет для нативной базы "^2.4.2" обновлен до нативной базы "^2.7.1".
  • Делюсь своим примером кода ниже:

<Item floatingLabel>
  <Label>Mobile Number</Label>
  <Input
    onChangeText = {(phone) => this.setState({phone})}
    value = {this.state.phone}
    autoCapitalize="none"
    keyboardType='numeric'
    returnKeyType={"next"}
    maxLength = {10}
    onSubmitEditing={(event) => this._password._root.focus()}
  />
</Item>

<Item floatingLabel>
  <Label>Password</Label>
  <Input
    getRef={(c) => this._password = c}
    onChangeText = {(password) => this.setState({password})}
    value={this.state.password}
    autoCapitalize="none"
    returnKeyType={"done"}
    secureTextEntry={this.state.hiddenPassword}
    onSubmitEditing = {this.handleLogin}
  />
</Item>

<TouchableOpacity>
  <Button style={styles.Button}
    onPress={this.handleLogin.bind(this)}>
    <Text style={styles.buttonText}>
      LOGIN
    </Text>
  </Button>
</TouchableOpacity>

person Suprabha    schedule 26.08.2018
comment
Спасибо супрабха, это было действительно полезно. - person Karan Verma; 26.08.2018

arrow_upward
1
arrow_downward

Кажется, что эти возвращаемые типы этого не делают. Этот вопрос задавался и раньше:

React Native: как выбрать следующий TextInput после нажатия следующей кнопки клавиатуры?

Может быть, это может быть чем-то помочь вам!

person ShaneG    schedule 19.12.2017