在 React Native 中删除输入文本中的下划线答案

【问题标题】：remove underline in inputText in React Native在 React Native 中删除输入文本中的下划线
【发布时间】：2016-11-08 03:02:56
【问题描述】：

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

【问题讨论】：

标签： css react-native

【解决方案1】：

应该是这样的

underlineColorAndroid="transparent"

【讨论】：

将此设置为道具，而不是样式。
@GOXR3PLUS 你是怎么解决的？请帮帮我。
@Kailash 看看here 不确定我是否已经修好了 :)

【解决方案2】：

使用TextInput组件的underlineColorAndroid属性

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

【讨论】：

【解决方案3】：

TextField 中的以下属性对我有用

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

【讨论】：

【解决方案4】：

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

inputContainerStyle={{borderBottomWidth:0}}

【讨论】：

经过多次试验，这是唯一对我有用的，在 Android 4.4 上

【解决方案5】：

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

underlineColorAndroid='#FFF'

【讨论】：

您将下划线颜色设置为白色...如果您的 TextInput 的 superView 背景颜色不是白色，则下划线将可见。最好使用“透明”。
这是简单的patiya系统

【解决方案6】：

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

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>

【讨论】：

【解决方案7】：

underlineColorAndroid="transparent" 非常适合我

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

See Discussion here

【讨论】：

【解决方案8】：

如果您仍在寻找解决方案而 underlineColorAndroid='transparent' 无法解决问题，请尝试 autoCorrect={false}。

例子：

<TextInput autoCorrect={false} underlineColorAndroid='transparent' placeholderTextColor={Colors.gray} style={styles.input} autoCapitalize='characters' placeholder="Type your word" />

【讨论】：

解释：underlineColorAndroid='transparent' 将解决大部分问题，但那些移动字典已打开的人显示下划线不是 textInput 为这些做autoCorrect={false} 解决问题或关闭您的手机或模拟器字典
感谢阿巴斯的解释。

【解决方案9】：

TextField 中的以下属性适用于 android 6 以上

underlineColorAndroid='transparent'

TextField 中的以下属性适用于 android 6 到 down

borderWidth={0}

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

underlineColorAndroid='transparent'
borderWidth={0}

【讨论】：

【解决方案10】：

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

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

【讨论】：

这不在文档中