文本字段专注于点击外部组件

Question

我已经实现了一个 react-native-material-textfield TextField，它专注于 TextField 组件之外的点击（但在距组件一定距离内）。为什么会这样？

我已经尝试限制 container 和 inputContainer 的大小，以及将 TextField 包装在 View 缩小以适合 TextField 组件。

这是我对 TextField:

的实现

<TextField
      ref={this.passwordRef}
      secureTextEntry={true}
      containerStyle={{width: 300, backgroundColor: 'green'}}
      inputContainerStyle={{width:300, backgroundColor: 'yellow'}}
      tintColor={'rgba(0, 0, 0, .38)'}
      fontSize={20}
      enablesReturnKeyAutomatically={true}
      autoCapitalize='none'
      autoCorrect={false}
      returnKeyType='done'
      label='Password'
      error={this.state.errors.password}
      onChangeText={this.handlePasswordChange}
      value={this.state.password}
      />

预期的行为是 TextField 应该在点击时聚焦，而不是当点击的目标在组件外部时。

Answer 1

将您的样式道具设置为等于其他宽度：样式 = {{width: 300}}

如果你有一个宽度，如果你的组件没有包裹在视图中，最好也指定一个高度。

Answer 2

终于明白了。即使对于 TextInput（由 style 引用）和 InputContainer（由 inputContainerStyle 引用）都看不到溢出，将 overflow 属性设置为 hidden containerStyle 解决了我的问题。

文本字段专注于点击外部组件

Text Field is focusing on tap outside component

textfield

react-native