直播小程式原始碼,react-native自定義文字輸入框
直播小程式原始碼,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自定義文字輸入框,更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2992530/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 影片直播app原始碼,自定義View 線型EditText輸入框APP原始碼View
- 直播商城原始碼,密碼輸入框自定義顯示隱藏圖示原始碼密碼
- 自定義UITextView輸入框UITextView
- 直播系統原始碼,Vue 禁止輸入框輸入空格原始碼Vue
- WPF 自定義文字框輸入法 IME 跟隨游標
- 文字框只能輸入數字程式碼
- Android自定義方形驗證碼輸入框Android
- 限定文字框輸入字串長度程式碼字串
- 短視訊直播原始碼,EditText輸入框的使用原始碼
- 影片直播系統原始碼,EditText輸入框的使用原始碼
- Android View篇之自定義驗證碼輸入框AndroidView
- iOS開發使用UIKeyInput自定義密碼輸入框iOSUI密碼
- 自定義chrome的輸入框背景顏色Chrome
- 規定文字框只能夠輸入數字包括小數的jQuery程式碼jQuery
- app直播原始碼,監聽EditText輸入框內輸入內容的變化APP原始碼
- 限定文字框只能輸入數字例項程式碼
- 文字框輸入數字倒計例項程式碼
- android自定義仿微信、支付寶 密碼輸入框Android密碼
- 直播網站原始碼,安卓防止輸入框自動彈出網站原始碼安卓
- textarea文字框輸入文字數目倒計效果程式碼例項
- 視訊直播系統原始碼,使用自定義UI 完成文字顏色載入效果原始碼UI
- 直播系統原始碼,簡易的自定義確認彈框AlertDialog原始碼
- 兩個文字框同步輸入內容程式碼例項
- 實現文字框輸入內容提示程式碼例項
- 限制文字框只能夠輸入數字程式碼例項
- Flutter仿微信,支付寶密碼輸入框+自定義鍵盤Flutter密碼
- input只能輸入文字框
- app直播原始碼,java自定義註解APP原始碼Java
- flutter 自定義驗證碼輸入框實現 verification_code_customFlutter
- 實現多個文字框輸入同步效果程式碼例項
- javascript限制textarea文字框輸入字元個數程式碼例項JavaScript字元
- 規定文字框只能夠輸入整數程式碼例項
- 直播app原始碼,Java的輸入輸出APP原始碼Java
- 直播小程式原始碼,Android 傾斜文字 效果設定原始碼Android
- 文字框輸入文字倒計詳解
- 自定義輸入框--超出限制動畫提示及自動轉行適配(待更新程式碼)動畫
- Flutter 密碼輸入框 驗證碼輸入框Flutter密碼
- 直播app系統原始碼,flutter 驗證碼輸入框的簡單封裝APP原始碼Flutter封裝