Как избавиться от нижней границы React Native Paper TextInput, когда сфокусировано - PullRequest
Новая
       50

Как избавиться от нижней границы React Native Paper TextInput, когда сфокусировано

0 голосов
/ 25 февраля 2019

Я использую react-native с react-native-paper.

У меня есть следующий код: 

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';

export default class Header extends Component {

  state = {
    text: '',
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput value={this.state.text} style={styles.input} />
        <Button mode="contained" style={styles.button}>Add Todo</Button>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'stretch',
    height: 40,
  },
  input: {
    flex: 1,
    height: 40,
    justifyContent: "center",
  },
  button: {
    flex: 0,
    height: 40,
    justifyContent: "center",
    backgroundColor: "#54c084",
  },
});

, который выводит что-то вроде этого:

enter image description here

затем, когда вход получает фокус, это выглядит так:

enter image description here

Мне нужноизбавиться от нижней границы на TextInput.

Есть идеи как это сделать?

РЕДАКТИРОВАТЬ 01

Интересно, если яdo: 

<TextInput value={this.state.text} style={styles.input} theme={{ colors: {primary: "#f00"} }} />

затем я получаю следующий вывод:

enter image description here

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

Спасибо!

Ответы [ 3 ]

0 голосов
/ 25 февраля 2019

вы установили underlineColor реквизит transparent

<TextInput 
  value={this.state.text}
  style={styles.input}
  underlineColor="transparent"   // add this
/>

РЕДАКТИРОВАТЬ

Это проблема в react-native-paper.Вы не можете изменить цвет активного ввода текста подчеркивания.https://github.com/callstack/react-native-paper/issues/688.
Однако, если вы хотите изменить цвет подчеркивания при вводе несфокусированного текста, вы можете использовать код выше

0 голосов
/ 25 февраля 2019

как Документы описывают:

По умолчанию TextInput имеет границу внизу своего представления.Эта граница имеет отступ, заданный фоновым изображением, предоставленным системой, и ее нельзя изменить.Решения, позволяющие избежать этого, - либо не устанавливать высоту явно, в случае, если система позаботится об отображении границы в правильном положении, либо не отображать границу, установив для underlineColorAndroid значение прозрачного

такВы можете просто использовать underlineColorAndroid реквизит: 

<TextInput 
  value={this.state.text}
  style={styles.input}
  underlineColorAndroid="transparent"
/>
0 голосов
/ 25 февраля 2019

Установить цвет подчеркивания на прозрачный.

--- Редактировать ---

Вы можете установить цвет подчеркивания, установив прозрачный на prop underlineColor. 

  <TextInput
    underlineColor={"transparent"}
  />
...