React Native之TextInput的介紹與使用(富文本封裝與使用實例,常用輸入框封裝與使用實例)

TextInput組件介紹

TextInput是一個允許用戶在應用中通過鍵盤輸入文本的基本組件。本組件的屬性提供了多種特性的配置，譬如自動完成、自動大小寫、占位文字，以及多種不同的鍵盤類型（如純數字鍵盤）等等。最簡單的用法就是丟一個TextInput到應用里，然后訂閱它的onChangeText事件來讀取用戶的輸入。

組件的常用屬性

（1）autoCapitalize：控制TextInput是否要自動將特定字符切換為大寫。可選值有：none、sentences、words、characters。

• characters: 所有的字符。
• words: 每個單詞的第一個字符。
• sentences: 每句話的第一個字符（默認）。
• none: 不自動切換任何字符為大寫。

（2）placeholder：占位符，在輸入前顯示的文本內容。

（3）value：文本輸入框的默認值。

（4）placeholderTextColor：占位符文本的顏色。

（5）secureTextEntry：如果為 true，表示密碼輸入框。文本顯示為“*”，默認值為false。

（6）multiline：如果為 true，表示多行輸入。

（7）editable：默認為 true。如果設置為 false 表示不可編輯。

（8）autoFocus：如果為 true，則自動獲取焦點。

（9）clearButtonMode：表示什么時候會顯示清除按鈕。可選值有：never、while-editing、unless-editing、always。

（10）maxLength：能夠輸入的最長字符數。

（11）enablesReturnKeyAutomatically：默認為 false。設置為 true 表示沒有輸入文本時返回鍵無法使用。

（12）returnKeyType：表示軟鍵盤返回鍵顯示的字符串。可選值為：default、go、google、join、next、route、search、send、yahoo、done、emergency-call。

（13）secureTextEntry：默認為 false。如果為 true，則像密碼框一樣隱藏輸入內容。

（14）autoCorrect：如果為false，會關閉拼寫自動修正。默認值是true。

（15）blurOnSubmit：如果為true，文本框會在提交的時候失焦。對於單行輸入框默認值為true，多行則為false。注意：對於多行輸入框來說，如果將blurOnSubmit設為true，則在按下回車鍵時就會失去焦點同時觸發onSubmitEditing事件，而不會換行。

（16）caretHidden：如果為true，則隱藏光標。默認值為false。

（17）keyboardType：keyboardType  enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') ，決定彈出的何種軟鍵盤的，譬如numeric（純數字鍵盤）。

這些值在所有平台都可用：

• default
• numeric
• email-address
• phone-pad

（18）iosreturnKeyType：iosreturnKeyType enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') 決定“確定”按鈕顯示的內容。在Android上你還可以使用returnKeyLabel來自定義文本。

跨平台

下列這些選項是跨平台可用的：

• done
• go
• next
• search
• send

限Android

下列這些選項僅限Android使用：

• none
• previous

限iOS

下列這些選項僅限iOS使用：

• default
• emergency-call
• google
• join
• route
• yahoo

（19）selectTextOnFocus：如果為true，當獲得焦點的時候，所有的文字都會被選中。

（20）selection：selection {start: number, end: number} 設置選中文字的范圍（指定首尾的索引值）。如果首尾為同一索引位置，則相當於指定光標的位置。

（21）selectionColor：設置輸入框高亮時的顏色（在iOS上還包括光標）

 組件的常用方法

（1）onChange：當文本發生變化時，調用該函數。

（2）onEndEditing：當結束編輯時，調用該函數。

（3）onBlur：失去焦點時觸發。

（4）onFocus：獲得焦點時觸發。

（5）onSubmitEditing：當結束編輯后，點擊鍵盤的提交按鈕觸發該事件。

（6）onChangeText：當文本框內容變化時調用此回調函數。改變后的文字內容會作為參數傳遞。

（7）onLayout：當組件掛載或者布局變化的時候調用，參數為 {x, y, width, height}。

（8）onScroll：在內容滾動時持續調用，傳回參數的格式形如 { nativeEvent: { contentOffset: { x, y } } }。 也可能包含其他和滾動事件相關的參數，但是在Android上，出於性能考慮，不會提供contentSize參數。

（9）onSelectionChange：長按選擇文本時，選擇范圍變化時調用此函數，傳回參數的格式形如  { nativeEvent: { selection: { start, end } } }。

（10）iosonKeyPress：當一個鍵被按下的時候調用此回調。傳遞給回調函數的參數為 { nativeEvent: { key: keyValue } }，其中keyValue即為被按下的鍵。會在onChange之前調用。

 組件的使用實例

 1，文本加輸入框(封裝組件 iOS Android)

封裝組件InputView.js的使用實例，如有需要完整的代碼，請留言評論

                    <View >
                        <Text>請認真填寫資料</Text>
                        <View style={{ marginTop: 12 }}>
                            <InputView name={'賬號'}
                                hintText={''}
                                editableV={false}
                                value={String(this.state.telephone)}
                            />
                            <InputView name={'支付密碼'}
                                isPassword={true}
                                hintText={'請輸入數字+字母的組合'}
                                onChangeText={(inputData) => { this.setState({ password: inputData }) }}
                            />
                            <InputView name={'再次確認'}
                                isPassword={true}
                                //value={this.state.nickname}
                                hintText={'請再次輸入'}
                                onChangeText={(inputData) => { this.setState({ confirmPass: inputData }) }}
                            />

                        </View>
                    </View>

 2，富文本編輯(封裝組件 iOS Android)

富文本RichTextView的使用實例，如有需要完整的代碼，請留言評論

            <View style={{ marginTop: 20 }}>
                        <Text
                            style={{
                                fontSize: 14,
                                color: AppSetting.BLACK,
                                paddingLeft: 20,
                                marginBottom: 10
                            }}>獎品描述</Text>
                        <RichTextView
                            inputStyle={styles.inputStyle}
                            placeholder="請填寫獎品描述(1000字以內哦)"
                            minHeight={240} // 最小高度,默認為100
                            maxLength={1000} // 最大長度,默認為100
                            onChangeText={(inputValue) => {
                                let desPrizes = CommonMethod.filteremoji(inputValue, 1)//表情過濾機制
                                this.setState({ desPrizes: desPrizes })
                            }}
                            showCount={true} // 展示剩余文字, 默認為true
                        />

                    </View>

RichTextView.js富文本編輯組件

/**
 * Created by jackson on 2018/08/13.
 * 富文本
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types'
import {
    StyleSheet,
    View,
    TextInput,
    Text,
    Dimensions
} from 'react-native';
const ScreenHeight = Dimensions.get('window').height;
const ScreenWidth = Dimensions.get('window').width;
const defaultMinHeight = 100
//模塊聲名並導出
export default class RichTextView extends Component {
    //屬性聲名
    static propTypes = {
        style:PropTypes.object,
        inputStyle:PropTypes.any,
        maxLength:PropTypes.number, // 限制文字長度
        placeholder:PropTypes.string,  // 占位文字
        minHeight:PropTypes.number,   // 最小高度
        showCount:PropTypes.bool,
        onChangeText:PropTypes.func,//獲取編輯的文本
    };

    //默認屬性
    static defaultProps = {
        maxLength: 100,
        showCount: true,
        minHeight: defaultMinHeight
    };

    //構造函數
    constructor(props) {
        super(props);
        //狀態機變量聲明
        this.state = {
            text: '',
        };
    }

    //渲染
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.inputViewStyle,this.props.style,{minHeight:this.props.minHeight}]}>
                    <TextInput
                        style={[styles.inputTextStyle,this.props.inputStyle,{minHeight:this.props.minHeight}]}
                        placeholder={this.props.placeholder ? this.props.placeholder :'請輸入'}
                        multiline={true}
                        paddingVertical={0}
                        selectionColor = {'#b2b2b2'}
                        textAlignVertical={'top'}
                        placeholderTextColor={'#b2b2b2'}
                        underlineColorAndroid={'transparent'}
                        maxLength={this.props.maxLength}
                        defaultValue = {this.state.text}
                        onChangeText={
                                (text) => {
                                    this.props.onChangeText(text)
                                    this.setState({
                                        text: text
                                    })
                                }
                        }
                    />
                    {
                        this.props.showCount ?
                            <Text style={{position: 'absolute', bottom: 5, right: 10, fontSize: 14}}>
                                {this.state.text.length}/{this.props.maxLength}
                            </Text>
                            :
                            null
                    }
                </View>
            </View>
        );
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    inputViewStyle: {
        width:ScreenWidth - 40,
        minHeight: defaultMinHeight,
    },
    inputTextStyle: {
        fontSize: 14,
        color: '#666666',
        width: '100%',
        minHeight: defaultMinHeight,
        padding: 10,
        paddingBottom: 30,
        paddingTop: 10
    }
});