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

Examples from props:

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

实现代码：

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