文本字段专注于轻按外部组件

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引用）都没有可见的溢出，将{{ 1}}解决了我的问题。