javascript React Native -文本输入的下边框

ppcbkaq5  于 2023-03-16  发布在  Java
关注(0)|答案(3)|浏览(201)

我正在尝试创建一个文本输入没有边界。我给了仍然和属性,然后这发生了。
text input img
有一个黑色的底部边界线。我怎样才能删除这个边界?

import { TextInput } from 'react-native-paper'

这些是风格代码

width: width * 0.6,
height: height * 0.075,
paddingLeft: 15,
fontSize: 12,
borderRadius: 25,

和文本输入

<TextInput
    style={styles.emptyPostPageTitleInput}
    placeholder="title"
    placeholderTextColor="grey"
    maxLength={17}/>
oxf4rvwz

oxf4rvwz1#

documentation声明“默认情况下,TextInput在其视图底部有一个边框。该边框的填充由系统提供的背景图像设置,并且不能更改。”
不过,如果您将borderBottomWidth: 0添加到样式中,应该会“删除”它。
对于react-native-paper,解决方案是在组件中添加以下内容:

underlineColor="transparent"

应如下所示:

<TextInput
    style={styles.emptyPostPageTitleInput}
    placeholder="title"
    placeholderTextColor="grey"
    maxLength={17}
    underlineColor="transparent"/>
sirbozc5

sirbozc52#

您可以通过添加简单样式使您的 * 边框不可见 ,而无需安装第三方库,如*(react-native-paper)**。

import {TextInput} from "react-native";


<TextInput
          style={styles.dummy}
          placeholder="Email Address or UserName" />

风格是

const styles = StyleSheet.create({
    dummy: {
    marginTop: 30,
    padding: 13,
    alignContent: "center",
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth:0,
    (// width: '85%',
    // height: 50,
    // borderColor: "#808080",
    // borderRadius: 10,
    // marginHorizontal: 22,
    // borderBottomWidth:0,
    // ) }        //You can use if you wanted. Not necessary.

输出将如下图x1c 0d1x所示

oxcyiej7

oxcyiej73#

“在React Native Paper的TextInput中,您可以使用主题属性自定义输入样式。例如,要删除输入处于活动状态时出现的蓝色下划线,您可以在主题属性中将colors.underlineColor设置为透明。此外,您可以将underlineColor设置为透明以删除边框底部宽度。下面是示例代码段:

theme={{
          colors: {
          primary: 'transparent',
          underlineColor: 'transparent',
             },
          }}
    underlineColor="transparent"

相关问题