Question

我觉得这是一件非常简单的事情，但出于某种原因，它只是不像我认为的那样工作。

我有一个带有两个字段的小表单（用户名和密码）和一个登录按钮。

当用户聚焦到第一个字段时，键盘会出现，他们可以编辑该输入。

当进入下一个字段时，如果用户按下＆＃34;返回/下一个＆＃34;键盘在设备的键盘上立即聚焦在第二个输入上（很好）。

但是，如果用户只需点击下一个输入字段，键盘就会关闭。 我希望它保持开放。

此外，当用户填写表单时，我希望他们能够点击＆＃34;登录＆＃34;按钮一次并提交表单 ...但是现在如果你这样做，键盘就会消失，你必须再次点击登录按钮。

如何在这里获得更好，更少刺激的键盘体验？

以下是我的代码：

return (
  <ScrollView
    style={styles.container}
    keyboardShouldPersistTaps="always" // I've also tried "handled" here, and also taking this attribute off all together
  >
    <View style={styles.modalHeaderBox}>
      <Text style={styles.modalHeader}>Log In</Text>
    </View>

    <View style={styles.form}>
      <View style={styles.row}>
        <TextInput
          ref="username"
          value={username}
          editable={editable}
          blurOnSubmit={false}
          keyboardType="email-address"
          returnKeyType="next"
          autoCapitalize="none"
          autoCorrect={false}
          underlineColorAndroid="transparent"
          onSubmitEditing={() => this.refs.password.focus()}
          placeholder="Email Address"
        />
      </View>

      <View style={styles.row}>
        <TextInput
          ref="password"
          value={password}
          editable={editable}
          blurOnSubmit={false}
          keyboardType="default"
          returnKeyType="go"
          autoCapitalize="none"
          autoCorrect={false}
          secureTextEntry
          underlineColorAndroid="transparent"
          onSubmitEditing={this.handlePressLogin}
          placeholder="Password"
        />
      </View>

      <View style={[styles.loginRow]}>
        <ButtonCTA
          style={styles.loginButton}
          onPress={this.handlePressLogin}
        >
          Log In
        </ButtonCTA>
      </View>
    </View>

  </ScrollView>
)

Answer 1

将此添加到您的输入组件道具

blurOnSubmit={false}

在本机表单中处理键盘的最佳方法是什么？我一直隐藏/显示并分散注意力

1 个答案: