Текстовое поле фокусируется на внешнем компоненте

Question

Я реализовал текстовое поле реагировать-нативный материал 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

Наконец-то понял это. Хотя переполнения не было видно ни для TextInput (на который ссылается style), ни для InputContainer (на который ссылается inputContainerStyle), установка overflow prop в hidden для containerStyle устранила мою проблему.

Answer 2

установите ваш стиль, равный другим значениям ширины: style = {{width: 300}}

Если у вас есть ширина, также лучше указать высоту, если ваш компонент не обернут в представление.