Реагируйте на ввод родного стиля из пользовательского интерфейса, чтобы иметь округлую границу

Question

Я использую входной компонент из комплекта пользовательского интерфейса для реагирования на нативные элементы, и я пытаюсь сделать так, чтобы он имел закругленную форму с радиусом границы, но безуспешно.Стиль ввода по умолчанию - просто линия, как показано на этом рисунке:

Я пытаюсь, чтобы мой ввод выглядел примерно так, из демонстрационного приложения реагировать на нативные элементы:

Я пробовал различные типы стилей для округления ввода, такие как:

<Input 
   borderStyle= 'solid'
   borderColor= 'black'
   borderRadius='25'
   overflow="hidden"
   keyboardAppearance="dark"
   placeholder=""
   onChangeText={(message) => { this.setState({message})}}
   value={this.state.message}
  />

Однако, похоже, без изменений ничего не изменилосьвход от стиля по умолчанию.Любые предложения будут высоко оценены.

РЕДАКТИРОВАТЬ: я получил округленный текст, чтобы появиться, однако по какой-то причине прямая линия все еще там, и текст кажется далеко налево на входе.Вот обновленный код:

<Input
        containerStyle={{marginVertical: 10}}
        overflow="hidden"
        inputStyle={{ borderStyle: 'solid', marginLeft: -4,overflow: 'hidden', marginBottom: 10, marginTop: 10, borderWidth: 1, borderColor: 'lightgrey', borderRadius: 25}}
        keyboardAppearance="dark"
        placeholder=""
        autoCorrect={false}
        onChangeText={(message) => { this.setState({message})}}
        value={this.state.message}
        />

И вот результат:

Как мне избавиться от этой строки и переместить текстовый курсор кправильно?

Answer 1

Вместо этого вы можете просто поместить стили в containerStyle.Как

<Input
    containerStyle={{ borderStyle: 'solid', overflow: 'hidden', marginBottom: 10, marginTop: 10, borderWidth: 1, borderColor: 'lightgrey', borderRadius: 25}}
    overflow="hidden"
    keyboardAppearance="dark"
    placeholder=""
    autoCorrect={false}
    onChangeText={(message) => { this.setState({message})}}
    value={this.state.message}
    />

Надеюсь, это кому-нибудь пригодится.

Answer 2

вам нужно использовать все эти параметры внутри стиля

<Input  
    style={{borderStyle: 'solid',borderColor: 'black', borderRadius: '25'}}
    overflow="hidden"
    keyboardAppearance="dark"
    placeholder=""
    onChangeText={(message) => { this.setState({message})}}
    value={this.state.message}
/>