React Native 小记 - LessBorderTextInput 无边框的 TextInput

他叫自己MR.张

发布于 2019-07-01 17:16:12

1.1K0

发布于 2019-07-01 17:16:12

文章被收录于专栏：Android必知必会Android必知必会

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

如果移动端访问效果不佳，请使用 ==> Github Pages 版。

代码展示

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;
    }
}