React Native 小记 - LessBorderTextInput 无边框的 TextInput

发表于 阅读次数：

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

代码展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 程序员节了，祝各位节日快乐。

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