React Native 小记 - LessBorderTextInput 无边框的 TextInput

栏目: IOS · Android · 发布时间: 6年前

内容简介:由于 TextInput 在 Android 和 iOS 平台默认表现不一致,为了统一样式,这里参照官方文档(基本实现思路是根据平台的不同,调用平台特有的属性来统一显示效果,再在使用的时候,外层嵌套 View 来实现统一样式的底部边框,还能添加类似密码点击可见等效果。今天10.24 程序员节了,祝各位节日快乐。

由于 TextInput 在 Android 和 iOS 平台默认表现不一致,为了统一样式,这里参照官方文档( 英文文档 | 中文文档 )进行了封装,并添加了对 ref 的支持。 ref 用于获取组件,实现自动切换输入框的焦点等场景。

代码展示

import React from 'react';
import {Platform, TextInput,} from 'react-native';

//没有底部下划线的输入框
export default class LessBorderTextInput extends React.Component {

    componentDidMount() {
        if (this.props.onRef != null) {
            this.props.onRef(this)
        }
    }

    focus() {
        this.textInput.focus()
    }

    render() {
        let mView;
        if (Platform.OS === 'android') {
            mView =
                <TextInput
                    {...this.props}
                    ref={input => this.textInput = input}
                    underlineColorAndroid={"transparent"}
                />;
        } else {
            mView =
                <TextInput
                    {...this.props}
                    ref={input => this.textInput = input}
                />;
        }
        return mView;
    }
}

总结

基本实现思路是根据平台的不同,调用平台特有的属性来统一显示效果,再在使用的时候,外层嵌套 View 来实现统一样式的底部边框,还能添加类似密码点击可见等效果。

今天10.24 程序员 节了,祝各位节日快乐。

如果有什么建议或者问题可以随时联系我,共同探讨学习:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

优秀网站设计

优秀网站设计

林奇 (Patrick J.Lynch)、霍顿 (Sarah Horton) / 机械工业出版社 / 2012-10-1 / 69.00元

优秀网站设计:打造有吸引力的网站(原书第3版),ISBN:9787111399599,作者:(美)Patrick J. Lynch Sarah Horton 著,李静等译一起来看看 《优秀网站设计》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具