React Native 之 TextInput使用

阿新 • • 發佈：2019-01-11

前言

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

TextInput 文字輸入框

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

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

    // 樣式 

    var styles = StyleSheet.create({
        container: {
            flex:1
        },

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

效果：

初始化效果.gif

Value：文字輸入的預設值（注：如果設定了此屬性，會造成無法輸入的尷尬，一般會搭配JS動態設定）

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

效果：

設定了Value.gif

keyboardType：設定鍵盤型別（決定使用哪種鍵盤）

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

效果：

設定鍵盤型別.gif

multiline：如果值為真，文字輸入可以輸入多行，預設值為假

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

效果：

多行輸入.gif

password：如果值為真，文字輸入框就成為一個密碼區域，預設值為假

    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>
            );
        }
    });

效果：

autoCorrect：如果為false，會關閉拼寫自動修正。預設值是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>
            );
        }
    });

效果：

autoFocus：如果為true，在componentDidMount後會獲得焦點。預設值為false。

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

效果：

clearButtonMode：清除按鈕出現的時機

never：不出現
while-editing：編輯的時候出現
unless-editing：沒有編輯時出現
always：總是出現

    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>
            );
        }
    });

效果：

clearTextOnFocus：如果為true，每次開始輸入的時候都會清除文字框的內容

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

效果：

editable：如果值為假，文字是不可編輯，預設值為真

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

效果：

enablesReturnKeyAutomatically：如果為true，鍵盤會在文字框內沒有文字的時候禁用確認按鈕。預設值為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>
            );
        }
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<li style="box-sizing:%2

React Native 之 TextInput使用

前言學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出

React Native之彈框存在TextInput，輸入框有焦點情況下需要點選兩次才可觸發事件-解決

Bug情況描述：React Native專案中，點選按鈕A出現彈框浮層，彈框中需要TextInput輸入數字，鍵盤浮起來；這時候點選取消按鈕L 或者確定按鈕R，只是讓鍵盤收起，但是並沒有觸發取消

React Native之Touchable四組件

width font clas 容易原生 ber 支持 cit out 一、TouchableHighlight 概念：本組件用於封裝視圖，使其可以正確響應觸摸操作。當按下的時候，封裝的視圖的不透明度會降低，同時會有一個底層的顏色透過而被用戶看到，使得視圖變暗或變亮。

React Native之登錄界面的布局

react native 中textInput的value屬性詳解

hold eric 工作 als size 保持 chang 無奈 bsp TextInput用法就不多講了，主要記錄下遇到的一個怪問題。背景：項目需要開發一個充值頁面，需要一個輸入框，然後幾個按鈕，輸入框是允許用戶自己輸入任意金額，按鈕是可以讓用戶快捷選擇金

react-native之遠程圖片修改後APP不更新

reactnative react-native react native 刷新圖片 base64今天在做客戶的項目時，有一個需求是App上要顯示遠端的圖片，而遠端的圖片有可能會更新，但圖片名不變。在react-native中，顯示圖片是用的自帶的Image組件，大家都知道react在更新組件之前都會判斷pr

使用WebStorm開發React-native之基礎

ttr regexp 渲染 hang reg 路徑 tostring png text 配置問題：（1）找不到SDK路徑，或者沒有SDK對應的版本：SDK必須是android-23才可以(更新SDK) 解決方法：環境變量，必須設置Android_HOME

react-native之模擬器調試

adb div connect oid native 令行 input 模擬 key 手動觸發搖一搖：adb shell input keyevent 82（有時模擬器搖一搖無效） android studio檢測不到模擬器：命令行cd到模擬器安裝目錄，找到adb.exe

React Native之this詳解

過程 show super try this registry alert item rop this引起的錯誤詳解我們在學習React Native的過程中，肯定經常遇見過undefined is not an object這樣的問題吧，尤其是剛開始學習的

React Native之屬性類型檢查機制詳解 PropType 變成 prop-types

word man div color object platform UC 靜態 ESS 屬性確認的作用使用 React Native 創建的組件是可以復用的，所以我們開發的組件可能會給項目組其他同事使用。但別人可能對這個組件不熟悉，常常會忘記使用某些屬性，或者某些屬性傳

react native之listview加下拉重新整理上拉分頁

直接上程式碼 var REQUEST_URL = 'xxxx&page='; import React, { Component } from 'react'; import { AppRegistry, Image, StyleSheet, Text, Vie

ios React-Native 之找不到標頭檔案

我的解決辦法有點簡單暴力：將package.json中的"react"直接改成16.2.0， react-native 改成了0.53.3,如下： "dependencies": { "react": "16.2.0", "re

React Native之函式作為引數傳遞給另外一個函式去呼叫

1 用法我們一般喜歡把js裡面的函式作為引數傳遞給另外一個函式,然後再呼叫這個函式,有點像C語言裡面的函式指標 2 程式碼測試寫了一個函式,2個引數分別是函式,然後更具資料決定呼叫哪個函式 /** *

React Native之通知欄訊息提示(android)

React Native之通知欄訊息提示(android) 一,需求分析與概述 1.1,推送作為手機應用的基本功能，是手機應用的重要部分，如果自己實現一套推送系統費時費力，所以大部分的應用都會選擇使用第三方的推送服務，如極光推送。 1.2,jpush-react-native

React native 的TextInput失去獲取焦點

<TextInput ref='first' underlineColorAndroid="transparent" autoFocus={firstFlag} editable={firstFlag}

React Native之通知欄訊息提示(ios)

React Native之通知欄訊息提示(ios) 一,需求分析與概述詳情請檢視：React Native之通知欄訊息提示(android) 二,極光推送註冊與整合 2.1,註冊詳情請檢視：React Native之通知欄訊息提示(android) 2.2,整合(ios) 第

React Native 之Visual Studio Code 推薦安裝外掛

Visual studio code 是Microsoft在2015年4月30推出輕量級開發程式碼編輯器。相比Visual studio小了很多，Visual studio安裝Xamarin移動開發100G的C盤快要爆滿了，無力吐槽，普通電腦帶不動Visual studio；還好

react-native之檔案上傳下載

目錄檔案上傳 1.檔案選擇 2.檔案上傳 1.FormData物件包裝 2.上傳示例檔案下載最近react-native專案上需要做檔案上傳下載的功能，由於才接觸react-native不久，好多東西不熟悉，前

React Native之Text控制元件屬性和樣式

屬性 numberOfLines 文字行數限制，新增後超過限制行數文字會在末尾預設以…的形式省略。 ellipsizeMode 設定文字縮略格式，配合numberOfLines使用，values： * tail：在末尾…省略（預設值） * c

React Native之js呼叫Android原生使用Callback傳遞結果給js

1 問題上面的文章只是呼叫安卓原生顯示Toast,但是我們一般會需要呼叫安卓的程式碼然後去拿回結果給js,但是我們知道在android層js呼叫的這個函式返回值必須的void,所以我們需要用到Callback,Callback一般用於同步,也就是說直接呼叫

React Native 之 TextInput使用

前言

TextInput 文字輸入框

相關推薦