Question

我正在使用反应原生文本字段组件如何删除文本字段中的底部下划线

这是我的代码我点了这个链接：https://github.com/n4kz/react-native-material-textfield

constructor(props) {
    super(props);
    this.state = {
        userName:'',
        password:''
    }
}

componentWillMount() {

}

componentDidMount(){

}

render() {
    //let { userName } = this.state;
    let { password } = this.state;

    return (

        <View style={{flex:1,justifyContent:'center'}}>

        <View style={{flex:0.2,justifyContent:'center',flexDirection:'row'}}>
        <View style={{flex:12}}></View>
        <View style={{flex:76,borderWidth:1,borderColor:'black',borderRadius:5,marginBottom:13.7}}>
            <TextField style={{ color: 'black',borderColor:'transparent'}}
                label='Phone number'
                textColor={'black'}
                value={this.state.userName}
                labelHeight={40}
                labelPadding={8}
                padding={10}
                Bottom padding= {10}
                Top padding={4}
                //width={50}
                //borderColor={'black'}
                //  textFocusColor={'orange'}
                //underlineColorAndroid='transparent'
                 baseColor={"black"}
                labelHeight={32}
                blurOnSubmit={true}
                //characterRestriction={10}
                onChangeText={(data) => this.setState({ userName: data })}
            />
        </View>
    )
}

Answer 1

其他TextInput属性也可以使用

参考：https://github.com/n4kz/react-native-material-textfield

React本机材料文本字段组件（<TextField />）也可以使用文本输入组件（<TextInput />）中的所有属性。因此，您可以使用underlineColorAndroid道具删除下划线边框。将此道具设为透明。

<TextField underlineColorAndroid="transparent" />

Answer 2

您可以尝试underlineColorAndroid='rgba(0,0,0,0)'

希望有所帮助

Answer 3

请尝试以下操作：lineWidth={0}，如果您想隐藏默认下划线，并且如果您想隐藏该行，请单击以下命令后出现该行，请尝试以下操作：activeLineWidth={0}。

Answer 4

好吧，使用完该库后，我得到了以下解决方案：

您可以使用react-native-material-textfield activeLineWidth 的道具之一，并以 0 作为参数。

Answer 5

underlineColor="transparent"

如何在反应原生材料文本字段中删除下划线

5 个答案: