Question

我无法删除输入文字中的下划线

Answer 1

我想它应该是

underlineColorAndroid="transparent"

请参阅相关问题https://github.com/facebook/react-native/issues/10108

Answer 2

使用TextInput组件的underlineColorAndroid属性

<TextInput underlineColorAndroid='transparent'
           placeholder="type here ..">
 TXT
</TextInput>

Answer 3

我找到了一个简单的解决方案

underlineColorAndroid='#FFF'

Answer 4

TextField中的prop支持我

underlineColorAndroid='rgba(0,0,0,0)'

Answer 5

我找到了另一种直接在TextInput上附加InputContainer样式的方法：

inputContainerStyle={{borderBottomWidth:0}}

Answer 6

underlineColorAndroid="transparent"非常适合我

<TextInput underlineColorAndroid="transparent" placeholder="Your Placeholder" />

See Discussion here

Answer 7

我发现只有一种方法可以从输入容器中完全删除下划线：

<TextField
    placeholder="user@gmail.co" 
    InputProps={{ disableUnderline: true }}
/>

Answer 8

我同意以上答案，但它会随机产生以下问题

https://github.com/facebook/react-native/issues/18214

NullPointerException：尝试调用虚拟方法'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable（android.content.res.Resources）

所以我开始尝试其他解决方案。我在style.xml中添加了编辑框样式

<item name="android:background">@android:color/transparent</item>

---------------------------完整代码------------------ ------------------

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowBackground">@color/backgroundcolor</item>
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
    </style>
    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
        <item name="android:background">@android:color/transparent</item>
        <item name="android:minHeight">40dp</item>
    </style>

Answer 9

underlineColorAndroid =“ transparent”为我工作。

/*This is an Example to Remove TextInput Underline in React Native*/
import React, { Component } from 'react';
//import react in our project
import { TextInput, View } from 'react-native';
//import all the components we will need in our project

export default class App extends Component {
  render() {
    return (
      <View
        style={{
          justifyContent: 'center',
          flex: 1,
          margin: 10,
        }}>
        <TextInput
          placeholder="https://aboutreact.com"
          placeholderTextColor="#ED2525"
          //We have to use this to remove underline
          underlineColorAndroid="transparent"
          fontSize="25"
          style={{
            textAlign: 'center',
            height: 50,
            backgroundColor: '#808080',
          }}
        />
      </View>
    );
  }
}

Answer 10

TextField 中的以下道具适用于 android 6 起

underlineColorAndroid='transparent'

TextField 中的以下道具适用于 android 6 向下

borderWidth={0}

所以你应该在每个设备上使用这两个道具

underlineColorAndroid='transparent'
borderWidth={0}

在React Native中删除inputText中的下划线

10 个答案: