react native 封装TextInput组件

上一篇 react-native文章提到了TextInput组件对安卓的适配问题，因此对该组件进行封装很有必要。

TextInput介绍

官网地址：

https://facebook.github.io/react-native/docs/textinput

附加中文网地址：https://reactnative.cn/docs/textinput/

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。

'use strict';

import React, { Component } from 'react'

import PropTypes from 'prop-types'

//import rpx from '../util/unit'

import {

  TextInput,

  StyleSheet,

  Platform,

  Dimensions

} from 'react-native'

const deviceH = Dimensions.get('window').height

const deviceW = Dimensions.get('window').width

const basePx = 750

function rpx(px) {

    return px *  deviceW / basePx

}

export default class Input extends Component{

  constructor(props) {

    super(props)

  }

  static propTypes = {

    value:PropTypes.string

  }

  shouldComponentUpdate(nextProps){

    return Platform.OS !== 'ios' || (this.props.value === nextProps.value &&

           (nextProps.defaultValue == undefined || nextProps.defaultValue == '' )) ||

           (this.props.defaultValue === nextProps.defaultValue &&  (nextProps.value == undefined || nextProps.value == '' ));

  }

  blur() {

    this.refs.textInput.blur()

  }

  render() {

    return (

      <TextInput

        ref="textInput"

        placeholderTextColor='#ccc'

        placeholder={'输入代码、名称或简拼'}

        style={[styles.textInput,this.props.style]}

        underlineColorAndroid="transparent"

        {...this.props}

      />

    )

  }

}

const styles = StyleSheet.create({

  textInput:{

    height:rpx(60),

    fontSize:rpx(30),

    color:'#333',

    backgroundColor:'#fff',

    borderRadius:rpx(4),

    paddingHorizontal:rpx(20),

    paddingVertical: 0

  }

})

https://blog.csdn.net/halo1416/article/details/82703503

备注：TextInput组件内容超出加省列号：ellipsizeMode = 'tail' numberOfLines = {1 }

注明：IOS下TextInput不能输入中文，需要加上

shouldComponentUpdate(nextProps){

    return Platform.OS !== 'ios' || (this.props.value === nextProps.value &&

           (nextProps.defaultValue == undefined || nextProps.defaultValue == '' )) ||

           (this.props.defaultValue === nextProps.defaultValue &&  (nextProps.value == undefined || nextProps.value == '' ));

  }

关于shouldComponentUpdate 可参考文章：http://www.80iter.com/blog/1512370656110845

巴特西

react native 封装TextInput组件

TextInput介绍

最新文章

热门文章