什么是处理在本地发生反应形成键盘的最佳方式？矿一直隐藏/显示并分散注意力

Question

我觉得这是一个超级简单的事情，但由于某种原因，它只是不喜欢的工作，我认为它应该。

我有一个小的表单具有两个字段（用户名和密码）和日志按钮。

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

当去到下一个字段，如果用户按下“返回/下一个”设备的键盘上按键它的重点就在第二输入（这是罚款）。

但是，如果用户而不只是敲击下一个输入字段，键盘关闭。我希望它继续开放。

此外，当用户完成填写表单，我希望他们能够只需点击一次“登录”按钮，并有如下形式提交...但现在如果你这样做的键盘刚刚消失，你必须再次点击登录按钮。

我怎么能在这里得到更好的，少不和谐键盘的经验？

下面是我的代码：

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}