react native input 组件简单封装

微信扫一扫,分享到朋友圈

react native input 组件简单封装

项目开发中 我们用到的一些 常用组件,大部分都是公用的,每次用的时候好多代码,样式,都要拷贝一份,倒不如根据自己的项目把组件进行封装,用的时候直接引进来。

下面介绍下 input 组件的封装,其他组件也是类似封装

看下效果图:

image.png

组件代码:

'use strict';

import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import BaseStyle from '../constants/Style';
import PropTypes from 'prop-types';

/**
 * 使用方法
 * 
 * 
 * 1,关于 右边带清楚按钮的使用  把输入框变成可控
 * 
 * constructor(props) {
    super(props);
    this.state = {
      phone: '',
      isOpenClear: false
    };
  };
  this.setState({ phone: text },()=>{
              this.state.phone.length > 0 ?
              this.setState({ isOpenClear: true })
              :
              this.setState({ isOpenClear: false })
            })}
          
            clear={() => {
             this.setState({ phone: '',isOpenClear:false })
            }}
          />

          
2. 关于 验证码输入框的使用

 { }
            }

          />
           { }
            }

          />


 */

export default class Input extends Component {
  static defaultProps = {
    LeftIcon: '', //左边icon
    LeftText: '',
    LeftIconStyle: '',
    LeftTextStyle: '',
    textAligin: 'left',
    isOpenClear: false,
    style: {},
    keyboardType: 'default',
    returnKeyType: '',
    placeholder: '请输入相关内容',
    placeholderTextColor: '#cccccc',
    editable: true, //如果为fals文本不可编辑
    autoFocus: false,
    caretHidden: false,
    secureTextEntry: false,
    multiline: false,
    isMsgInput: false,
    MsgDisable: false,
    msgCodeText: '获取验证码',
    isImageMsg: false,
    MsgTextStyle: {},
    MsgButtonStyle: {},
    MsgButtonDisabledStyle: {},
    MsgTextDisabledStyle: {},
    ImageButtonStyle: {},
    ImageUri: '',
    isBase64: false,
  };
  static propTypes = {
    LeftIcon: PropTypes.string, //左边icon
    LeftText: PropTypes.string, //左边文字
    LeftIconStyle: PropTypes.object, //左边Icon样式
    LeftTextStyle: PropTypes.object, //左边文字样式,
    isOpenClear: PropTypes.bool, //是否开启右边清楚按钮
    isMsgInput: PropTypes.bool, //是否验证码输入框
    MsgDisable: PropTypes.bool, //验证码按钮是否禁用
    msgCodeText: PropTypes.string, //验证码按钮文字
    MsgTextStyle: PropTypes.object, //验证码文本样式
    MsgButtonStyle: PropTypes.object, //验证码按钮样式
    MsgButtonDisabledStyle: PropTypes.object, //验证码禁用时的按钮样式
    MsgTextDisabledStyle: PropTypes.object, //验证码禁用时的文本样式
    isImageMsg: PropTypes.bool, //是否是图形验证码
    ImageButtonStyle: PropTypes.object, //图形验证码样式
    ImageUri: PropTypes.string, //图形验证码图片地址
    isBase64: PropTypes.bool, //是否是base64的图片
    style: PropTypes.object, //输入框样式,
    textAligin: PropTypes.string, //文本对其方式
    keyboardType: PropTypes.string, //键盘类型
    maxLength: PropTypes.number, // 最大长度
    returnKeyType: PropTypes.string, //键盘的弹出收回类型
    placeholder: PropTypes.string, //placeholder
    placeholderTextColor: PropTypes.string, //placeholder 颜色
    editable: PropTypes.bool, //是否禁用
    autoFocus: PropTypes.bool, //是否自动聚焦
    caretHidden: PropTypes.bool, //是否隐藏光标
    secureTextEntry: PropTypes.bool, //是否开启密码显示
    defaultValue: PropTypes.string, //输入框默认值
    multiline: PropTypes.bool, //是否允许多行输入
    onChange: PropTypes.func, //当文本框内容变化时调用此回调函数
    onBlur: PropTypes.func, //当文本框失去焦点的时候调用此回调函数。
    onChangeText: PropTypes.func, //当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递
    onFocus: PropTypes.func, //当文本框获得焦点的时候调用此回调函数。
    clear: PropTypes.func, //清楚操作
    onPress: PropTypes.func, //验证码的发送操作
    onPressImage: PropTypes.func, //图形验证码的操作
  };

  constructor(props) {
    super(props);
  }

  render() {
    const {
      LeftIcon,
      LeftText,
      LeftIconStyle,
      LeftTextStyle,
      isOpenClear,
      style,
      textAligin,
      keyboardType,
      maxLength,
      returnKeyType,
      placeholder,
      placeholderTextColor,
      editable,
      autoFocus,
      caretHidden,
      secureTextEntry,
      defaultValue,
      multiline,
      onChange,
      onBlur,
      onChangeText,
      onFocus,
      clear,
      isMsgInput,
      msgCodeText,
      MsgTextStyle,
      MsgButtonStyle,
      MsgDisable,
      MsgButtonDisabledStyle,
      MsgTextDisabledStyle,
      isImageMsg,
      ImageButtonStyle,
      ImageUri,
      isBase64,
      onPress,
      onPressImage,
    } = this.props;
    const textAlignStyle =
      textAligin === 'left'
        ? { textAlign: 'left', marginLeft: 5 }
        : textAligin === 'right'
          ? { textAlign: 'right' }
          : null;
    const changeLeftStyle = LeftIcon ? { marginLeft: 5 } : null;
    const baseImage = isBase64 ? `data:image/png;base64,${ImageUri}` : ImageUri; //base64图片处理
    return (
      
        
          {LeftIcon}
          
            {LeftText}
          
        
        
        {isOpenClear ? (
          
            
          
        ) : null}
        {isMsgInput ? (
          MsgDisable ? (
            
              
                {msgCodeText}
              
            
          ) : (
             {
                onPress;
              }}>
              {msgCodeText}
            
          )
        ) : null}
        {isImageMsg ? (
           {
              onPressImage;
            }}>
            
          
        ) : null}
      
    );
  }
}

const styles = StyleSheet.create({
  inputView: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    paddingLeft: 15,
    paddingRight: 15,
    height: 60,
    borderBottomColor: '#eeeeee',
    borderBottomWidth: 1,
    // backgroundColor:"red"
  },

  textInputStyle: {
    flex: 1,
    fontSize: 15,
    height: 60,
    padding: 0,
    textAlign: 'right',
  },
  leftView: {
    ...BaseStyle.row,
  },
  leftIcont: {
    fontFamily: 'iconfont',
    fontSize: 15,
    color: '#333',
  },
  leftText: {
    fontSize: 15,
    color: '#333',
  },
  closeIcon: {
    fontFamily: 'iconfont',
    fontSize: 14,
    color: '#cccccc',
  },
  MsgButton: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    width: 90,
    height: 35,
    borderWidth: 1,
    borderColor: '#31bcfe',
    borderRadius: 4,
    backgroundColor: '#effaff',
  },
  MsgText: {
    fontSize: 14,
    color: '#31bcfe',
  },
  MsgButtonDisabled: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    width: 90,
    height: 35,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    backgroundColor: '#ccc',
  },
  MsgTextDisabled: {
    fontSize: 14,
    color: '#fff',
  },
  ImageButton: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    width: 90,
    height: 35,
  },
});

微信扫一扫,分享到朋友圈

react native input 组件简单封装

AI赋能产业 深兰人工智能芯片研究院落地

上一篇

Ruby - Why put a module in a class?

下一篇

你也可能喜欢

react native input 组件简单封装

长按储存图像,分享给朋友