当returnKeyType更改时，如何使键盘动态更新？

Question

作为一个简单的例子，我有一个设置

render() {
  return (
    <View>
      <TextInput
        onChangeText={text => this.setState({ email: text })}
        returnKeyType={
          (this.state.email !== '' && this.state.password !== '') ? 'go' : 'next'
        }
      />
      <TextInput
        onChangeText={text => this.setState({ email: text })}
        returnKeyType={
          (this.state.email !== '' && this.state.password !== '') ? 'go' : 'next'
        }
      />
    </View>
  )
}

然后，当我专注于电子邮件字段时，我期望Return键说出下一步。确实如此。然后输入文字。

然后，当我专注于密码字段时，我希望它仍然显示Next，并且确实如此。然后输入文字。

但是现在我希望它将更改为“ Go”。但事实并非如此。我在RN上发现了一个问题，该问题说我可以更改key上的TextInputs字段，从技术上来说，它可以更改键盘，但是它也使输入字段空白，因此不是一个有用的解决方案。

如何使键盘动态更新？

Answer 1

希望这能解决您的问题

render() {
  let passwordReturnKey = this.state.password.length ? 'go' : 'next';
  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={text => this.setState({ email: text })}
        returnKeyType={'next'}
      />
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={text => this.setState({ password: text })}
        returnKeyType={passwordReturnKey}
      />
    </View>
  )
}