首页 > 编程语言 >直播小程序源码,react-native自定义文本输入框

直播小程序源码,react-native自定义文本输入框

时间:2023-11-02 14:24:16浏览次数:32  
标签:style 自定义 value react state 源码 PropTypes props textAlign

直播小程序源码,react-native自定义文本输入框

Examples from props:

 


...
  _onChange = (label, value) => {
    this.setState({ [label]: value });
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>
          {this.state.result}
        </Text>
        <Input onChange={(value) => this._onChange('input1', value)} value={this.state.input1 || ''} />
        <Input label={'姓名'} onChange={(value) => this._onChange('input2', value)} value={this.state.input2 || ''} />
        <Input onChange={(value) => this._onChange('input3', value)} mode={'TextArea'} label={'详细地址'} value={this.state.input3 || ''} />
      </View>
    );
  }
...
 

实现代码:

 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  TextInput,
  View,
  Text,
  StyleSheet,
} from 'react-native';
const styles = StyleSheet.create({
  center: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});
class Input extends Component {
  static propTypes = {
    inputStyle: TextInput.propTypes.style,
    labelTextStyle: TextInput.propTypes.style,
    placeholderTextColor: PropTypes.string,
    isUpdate: PropTypes.bool,
    readonly: PropTypes.bool,
    textInputStyle: TextInput.propTypes.style,
    autoCapitalize: PropTypes.oneOf(['characters', 'words', 'sentences', 'none']),
    label: PropTypes.string,
    placeholder: PropTypes.string,
  };
  static defaultProps = {
    placeholderTextColor: '#ccc8c4',
    autoCapitalize: 'none',
    isUpdate: true,
    readonly: false,
    label: '文本输入框',
    placeholder: '请输入'
  };
  constructor(props) {
    super(props);
    this.state = {
      value: props.value || '',
      textAlign: 'right'
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.state.value) {
      this.setState({ value: nextProps.value });
    }
  }
  _onChangeText = (val) => {
    this.setState({ value: val });
    this.props.onChange && this.props.onChange(val.replace(/(^\s*)|(\s*$)/g, ''));
  };
  _onBlur = (e) => {
    const { onBlur } = this.props;
    onBlur && onBlur(e);
    this.setState({
      textAlign: 'right'
    });
  };
  _onFocus = (e) => {
    const { onFocus } = this.props;
    onFocus && onFocus(e);
    this.setState({
      textAlign: 'left'
    });
  };
  _renderInputContent = () => {
    const { textInputStyle, placeholderTextColor, autoCapitalize, isUpdate, suffix } = this.props;
    return (
      isUpdate ?
        <View
          style={[{ flexDirection: 'row', flex: 1, height: '100%' }, styles.center]}
        >
          <TextInput
            {...this.props}
            onChangeText={this._onChangeText}
            onBlur={this._onBlur}
            onFocus={this._onFocus}
            style={[{ textAlign: (this.state.value === 0 || this.state.value) ?
              this.state.textAlign : 'left', flex: 1, fontSize: 14, color: '#332f2b' }, textInputStyle]}
            placeholderTextColor={placeholderTextColor}
            value={String(this.state.value)}
            autoCorrect={false}
            autoCapitalize={autoCapitalize}
            underlineColorAndroid="transparent"
          />
          <Text style={{ marginRight: 10 }}>
            {(suffix && suffix.length > 3) ? '' : suffix}
          </Text>
        </View>
        :
        <View
          style={[{ flexDirection: 'row', flex: 1, height: '100%', backgroundColor: '#f7f6f5' }, styles.center]}
        >
          <Text
            style={{ textAlign: this.state.value ? this.state.textAlign : 'left', flex: 1 }}
          >
            {this.state.value}
          </Text>
          <Text style={{ marginRight: 10 }}>
            {(suffix && suffix.length > 3) ? '' : suffix}
          </Text>
        </View>
    );
  };

 

以上就是 直播小程序源码,react-native自定义文本输入框,更多内容欢迎关注之后的文章

 

标签:style,自定义,value,react,state,源码,PropTypes,props,textAlign
From: https://www.cnblogs.com/yunbaomengnan/p/17805286.html

相关文章

  • 在线直播系统源码,vue实现搜索文字高亮功能
    在线直播系统源码,vue实现搜索文字高亮功能1、在页面中使用v-html渲染 <template> <divclass="box">  <!--搜索框-->  <divclass="mySearch">   <van-search    v-model="PopUpSarCh"    show-action    placeholder=&......
  • 医院智能导诊系统全套源码,通过患者主诉症状,自动匹配挂号科室和医生
      人体画像智能导诊系统全套源码技术架构:springboot+redis+mybatisplus+mysql+RocketMQ     随着计算机技术、网络技术、医院内网、智能终端的发展成熟,自动化、智能化就诊将是未来医院的发展模式。在目前综合性医疗机构,医院建设物庞大且复杂,接待就诊人员数量较大,医院......
  • uniapp微信小程序自定义隐私权限弹窗
    插件地址:https://ext.dcloud.net.cn/plugin?id=14576#detail 样式小改动<template><viewclass="xh-privacy"><!--默认主题--><view:style="'background:'+background+';'"class="the......
  • 【PyTorch 卷积】实战自定义的图片归类
    前言        卷积神经网络是一类包含卷积计算且具有深度结构的前馈神经网络,是深度学习的代表算法之一,它通过卷积层、池化层、全连接层等结构,可以有效地处理如时间序列和图片数据等。关于卷积的概念网络上也比较多,这里就不一一描述了。实战为主当然要从实际问题出发,用代码......
  • yum安装nginx-源码编译安装nginx
    #nginx官网http://nginx.org/#nginx主要代理七层协议,也就是应用层;nginx是一个高性能HTTP和反向代理,负载均衡服务器.............#nginx默认端口是80#https默认端口是443#官网查看安装步骤http://nginx.org/——>documentation——>Installingnginx——>InstallationonLinux,pac......
  • DiscuzQ官方最新v3.0.220211源码编译搭建教程和官方部署教程,适合二开(已本地编译通过,无
    经过长达半个月的研究!完成这篇DiscuzQ官方最新版本v3.0.220211的源码编译和官方部署教程。适合喜欢二次开发的小伙伴们,已经通过本地编译测试,保证没有任何错误。具体教程在我搭建的dzq(使用二开方法搭建)发布的文章:https://www.abyssdawn.com/thread/4......
  • “共享书角”图书借还管理系统 小程序-计算机毕业设计源码+LW文档
    小程序框架:uniapp小程序开发软件:HBuilderX小程序运行软件:微信开发者数据库:DROPTABLEIFEXISTSchujiezhe;/*!40101SET@saved_cs_client=@@character_set_client/;/!40101SETcharacter_set_client=utf8/;CREATETABLEchujiezhe(idbigint(20)NOTNULLAUT......
  • “口腔助手”小程序的设计与实现-计算机毕业设计源码+LW文档
    摘 要随着信息时代的来临,过去的“口腔助手”管理方式缺点逐渐暴露,现在对过去的“口腔助手”管理方式的缺点进行分析,采取计算机方式构建“口腔助手”小程序。本文通过阅读相关文献,研究国内外相关技术,提出了一种预约信息管理、“口腔助手”管理于一体的系统构建方案。本文通过采......
  • 大学生党务学习平台-计算机毕业设计源码+LW文档
    摘 要如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统大学生党务学习平台信息管理难度大,容错率低,管理人员处理数据费工费时,所以专门为解决这个难题开发了一个大学生党......
  • tomcat nio2源码分析
    一、前言​ 最近在看tomcatconnector组件的相关源码,对Nio2的异步回调过程颇有兴趣,平时读源码不读,自己读的时候很多流程都没搞明白,去查网上相关解析讲的给我感觉也不是特别清晰,于是就自己慢慢看源码,以下是我自己的见解,因为开发经验也不多,刚成为社畜不久,有些地方讲错如果有大佬......