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 程序员节了,祝各位节日快乐。

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