无法从一个 TextInput 点按到另一个

Question

当我专注于一个 TextInput 时，点击另一个 TextInput 字段并没有达到我的预期（将 focus 更改为 TextInput）。

相反，它只是模糊当前的TextInput，需要第二次点击才能聚焦下一个TextInput。

有没有办法做到这一点，或者这是 React Native 当前的缺点？

示例代码：

class MyTest extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <View>
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ddd',
    paddingTop: 64
  },
  textInput: {
    backgroundColor: '#fff',
    borderColor: '#000',
    borderWidth: 1,
    height: 46,
    paddingLeft: 10
  }
});

事实证明，当输入字段位于 ScrollView 中时，它们的行为与我上面描述的一样（您不能只从一个字段点击到另一个字段）。我尝试将 TextInputs 包装在 View 中以解决此问题，但没有奏效。

Answer 1

您需要将keyboardShouldPersistTaps={true}添加到您ScrollView。

keyboardShouldPersistTaps bool：

当为 false 时，当键盘向上时在焦点文本输入之外点击会关闭键盘。当为真时，滚动视图将 不捕捉水龙头，键盘不会自动关闭。这 默认值为 false。

Answer 2

您可以通过 TextInput 委托方法使用 Resign First Responder