Início / coding / Perguntas / 77029628
Accepted
Phil Lucks
Asked: 2023-09-03 02:47:25 +0800 CST

reagir ao problema de fundo da borda de entrada de elementos nativos, com raio

  • 772

Como posso alterar a borda inferior de um Input com RNElements, para que corresponda aos demais lados?

estilo:

inputStyle: {
        borderWidth: 0,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderTopWidth: 1,
        borderBottomWidth: 1, // toggle to 0 doesn't help
        borderRadius: 5,
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 5,
      },

Vejo que a entrada RN subjacente tem uma observação sobre isso:

TextInput tem por padrão uma borda na parte inferior de sua visualização. Esta borda tem seu preenchimento definido pela imagem de fundo fornecida pelo sistema e não pode ser alterada. As soluções para evitar isso são não definir a altura explicitamente, caso em que o sistema se encarregará de exibir a borda na posição correta, ou não exibir a borda definindo underlineColorAndroid como transparente.

Tentei outras recomendações deste fórum, e também não defini uma altura, defini um padrão underlineColorAndroid: 'transparent',no meu tema, borderWidth: 0,mas sem sucesso.

react-native

1 respostas

  1. Best Answer
        <Input
      containerStyle={{ borderWidth: 0 }}
      inputContainerStyle={{
        borderWidth: 0,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderTopWidth: 1,
        borderBottomWidth: 2,
        borderRadius: 5,
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 5
      }}
      placeholder="Email"
    />

    Eu acho que você usa inputStyle={{}}. Vamos tentar inputContainerStyle={{}}.

    • 1

relate perguntas