亚洲97色堂,在线日韩中文,9在线精品

前言

學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)
本人接觸 React Native 時間并不是特別長，所以對其中的內(nèi)容和性質(zhì)了解可能會有所偏差，在學(xué)習(xí)中如果有錯會及時修改內(nèi)容，也歡迎萬能的朋友們批評指出，謝謝
文章第一版出自簡書，如果出現(xiàn)圖片或頁面顯示問題，煩請轉(zhuǎn)至簡書查看也希望喜歡的朋友可以點贊，謝謝

TextInput 文本輸入框

React Native中的文本輸入框使用和iOS比較相近，可能是因為 RN 首先封裝iOS端的緣故（這點對iOS開發(fā)者來說是個好消息）
TextInput也是繼承自 View,所以 View 的屬性 TextInput 也能使用，一些樣式類的屬性可以參照 View 的相關(guān)屬性
為了更好的講解 TextInput，先創(chuàng)建一個基本的文本輸入框

    // 視圖
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput style={styles.textInputStyle}></TextInput>
                </View>
            );
        }
    });
    
    // 樣式
    var styles = StyleSheet.create({
        container: {
            flex:1
        },

        textInputStyle: {
            // 設(shè)置尺寸
            width:width,
            height:40,
            marginTop:100,
            // 設(shè)置背景顏色
            backgroundColor:'green'
        }
    });

效果：

初始化效果.gif

Value：文本輸入的默認值（注：如果設(shè)置了此屬性，會造成無法輸入的尷尬，一般會搭配JS動態(tài)設(shè)置）

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        value="設(shè)置了Value"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

設(shè)置了Value.gif

keyboardType：設(shè)置鍵盤類型（決定使用哪種鍵盤）

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        keyboardType="number-pad"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

設(shè)置鍵盤類型.gif

multiline：如果值為真，文本輸入可以輸入多行，默認值為假

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        multiline={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

多行輸入.gif

password：如果值為真，文本輸入框就成為一個密碼區(qū)域，默認值為假

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        password={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

密碼模式.gif

placeholder：在文本輸入之前提示用戶文本框功能，也就是占位文字

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        placeholder="請輸入賬號"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

占位文字.gif

placeholderTextColor：占位字符串的文本顏色

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        placeholder="請輸入賬號"
                        placeholderTextColor="red"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

占位文字顏色.gif

autoCapitalize：控制TextInput是否要自動將特定字符切換為大寫

none：不自動使用任何東西
sentences：每個句子的首字母（默認）
words：每一個單詞的首字母
characters：所有字符

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="none"
                    autoCapitalize="none"
                ></TextInput>
                {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="sentences"
                    autoCapitalize="sentences"
                ></TextInput>
                {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="words"
                    autoCapitalize="words"
                ></TextInput>
                {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="characters"
                    autoCapitalize="characters"
                ></TextInput>
                </View>
            );
        }
    });

效果：

autoCapitalize.gif

autoCorrect：如果為false，會關(guān)閉拼寫自動修正。默認值是true。

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="沒有自動改正拼寫"
                    autoCorrect={false}
                ></TextInput>
                {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="自動改正拼寫"
                    autoCorrect={true}
                ></TextInput>
                </View>
            );
        }
    });

效果：

autoCorrect.gif

autoFocus：如果為true，在componentDidMount后會獲得焦點。默認值為false。

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        autoFocus={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

autoFocus.gif

clearButtonMode：清除按鈕出現(xiàn)的時機

never：不出現(xiàn)
while-editing：編輯的時候出現(xiàn)
unless-editing：沒有編輯時出現(xiàn)
always：總是出現(xiàn)

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
            <TextInput
                style={styles.textInputStyle}
                placeholder="never"
                clearButtonMode="never"
            ></TextInput>
            {/* 文本輸入框 */}
            <TextInput
                style={styles.textInputStyle}
                placeholder="while-editing"
                clearButtonMode="while-editing"
            ></TextInput>
            {/* 文本輸入框 */}
            <TextInput
                style={styles.textInputStyle}
                placeholder="unless-editing"
                clearButtonMode="unless-editing"
            ></TextInput>
            {/* 文本輸入框 */}
            <TextInput
                style={styles.textInputStyle}
                placeholder="always"
                clearButtonMode="always"
            ></TextInput>
                </View>
            );
        }
    });

效果：

clearButtonMode.gif

clearTextOnFocus：如果為true，每次開始輸入的時候都會清除文本框的內(nèi)容

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        clearTextOnFocus={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

clearTextOnFocus.gif

editable：如果值為假，文本是不可編輯，默認值為真

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        editable={false}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

editable.gif

enablesReturnKeyAutomatically：如果為true，鍵盤會在文本框內(nèi)沒有文字的時候禁用確認按鈕。默認值為false。

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    enablesReturnKeyAutomatically={true}
                ></TextInput>
                {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    enablesReturnKeyAutomatically={false}
                ></TextInput>
                </View>
            );
        }
    });

效果：

enablesReturnKeyAutomatically.gif

returnKeyType：決定返回鍵的樣式

default
go
google
join
next
route
search
send
yahoo
done
emergency-call

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    returnKeyType="go"
                ></TextInput>
                {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    returnKeyType="join"
                ></TextInput>
                {/* 文本輸入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    returnKeyType="done"
                ></TextInput>
                </View>
            );
        }
    });

效果：

returnKeyType.gif

secureTextEntry：如果值為真，文本輸入框就會使輸入的文本變模糊，以便于像密碼這樣敏感的文本保持安全，類似 password 屬性，默認值為假

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        keyboardType="number-pad"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

secureTextEntry.gif

onChange：當文本框內(nèi)容變化時調(diào)用此回調(diào)函數(shù)

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onChange={() => {alert('文本框內(nèi)容改變')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onChange.gif

onChangeText：當文本框內(nèi)容變化時調(diào)用此回調(diào)函數(shù)。改變后的文字內(nèi)容會作為參數(shù)傳遞

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onChangeText={(Text) => {alert('文字改變')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onChangeText.gif

onFocus：當文本框獲得焦點的時候調(diào)用此回調(diào)函數(shù)

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onFocus={() => {alert('文本框獲得焦點')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onFoucs.gif

onBlur：當文本框失去焦點的時候調(diào)用此回調(diào)函數(shù)

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onBlur={() => {alert('失去焦點')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onBlur.gif

onEndEditing：結(jié)束編輯時，調(diào)用回調(diào)函數(shù)

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本輸入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onEndEditing={() => {alert('結(jié)束文本編輯')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onEndEditing.gif

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

React-Native 之 TextInput使用

React-Native 之 TextInput使用

前言

TextInput 文本輸入框

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

React-Native 之 TextInput使用

前言

TextInput 文本輸入框

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av