React-Native 自定义TextInput样式

本文介绍了如何在React-Native中自定义TextInput的样式,以满足特定需求。通过添加样式属性,去除下划线,调整背景颜色,改变字体大小,并使用View组件来补充间距,实现了一个更符合设计要求的输入框。强调利用好View控件来辅助调整布局,以创建定制化的样式效果。
摘要由CSDN通过智能技术生成

在react-native中,其实提供的TextInput样式已经非常强大了,但是事实上有时候我们可能需要自己订制一个样式已满足我们的需求,比如这种

所以这篇就是介绍如何去订制。

如果我们只是把一个默认的TextInput拉出来,会长成这样最下面这样

分析一下,我们需要去除下划线,把背景设置成白色,同时可以略微调整一下字体大小。所以给TextInput添加一个style样式

<TextInput
    style={styles.edit}
    underlineColorAndroid='transparent'/>

edit: {
        marginTop: 30,
        height: 40,
        fontSize: 20,
        backgroundColor: '#fff'
    },

为了和上面的控件留有一定的距离,我们可以加一个marginTop属性。这

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值