如何在React Native中使用文本輸入組件?

You know, an app becomes more authentic and professional when there is the interaction between the app and the user.

您知道,當應用程序與用戶之間存在交互時,該應用程序將變得更加真實和專業。

The text input component in react-native brings that interaction between the application and the users by allowing the text to be input by the users using the keyboard.

react-native中的文本輸入組件通過允許用戶使用鍵盤輸入文本,從而在應用程序和用戶之間帶來了交互。

You will surely find some differences with that of React JS.

您一定會發現與React JS有所不同。

The text input component has some attributes like onChangeText and onSubmitEditing which make text input fascinating and more interactive.

文本輸入組件具有一些屬性,例如onChangeTextonSubmitEditing ,這些屬性使文本輸入引人入勝并且更具交互性。

Text input is like a self-closing tag and is written as a word. Below is a brief example.

文本輸入就像一個自動關閉標簽,被寫成一個單詞。 下面是一個簡短的示例。

Open your App's App.js file and type the following,

打開您應用的App.js文件,然后輸入以下內容,

import * as React from 'react';
import {useState} from 'react';
import { Text, View, StyleSheet, Button, TextInput } from 'react-native';
export default function App () {
return (
<View style={styles.container}>
<Text> I love JESUS</Text>
<TextInput
placeholder='type your message here'
autoCapitalize = "characters"
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

From the code above, we begin by importing the component from react native before being able to use it else, an error will occur.From the code above, we begin by importing the component from react native before being able to use it else, an error will occur.

從上面的代碼開始,我們先從react native導入組件,然后才能使用其他組件,然后會發生錯誤。從上面的代碼開始,我們首先要從react native導入組件,然后再使用其他組件。將會發生錯誤。

I have also implemented the placeholder attribute which works here just like in html and the autoCapitalize property which simply converts every text input to capital letters. Other attributes and props can be seen on the official documentation.

我還實現了占位符屬性,該屬性在這里像html一樣工作,而autoCapitalize屬性僅將輸入的每個文本轉換為大寫字母。 其他屬性和道具可以在官方文檔中找到。

Take Note: Auto Capitalize doesn't work from all keyboards.

請注意:并非所有鍵盤都支持自動大寫。

Output

輸出量

How to use Text Input Component in React Native?

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!

感謝您與我編碼! 下次見。 隨意發表評論或問題。 上帝祝福你!

翻譯自: https://www.includehelp.com/react-js/how-to-use-text-input-component-in-react-native.aspx

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/542061.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/542061.shtml
英文地址,請注明出處:http://en.pswp.cn/news/542061.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

lvs負載均衡—NAT模式

NAT模式原理圖 Virtual Server via NAT &#xff1a; 用地址翻譯實現虛擬服務器,地址轉換器有能被外界訪問到的合法IP地址,它修改來自專有網絡的流出包的地址,外界看起來包是來自地址轉換器本身,當外界包送到轉換器時,它能判斷出應該將包送到內部網的哪個節點。 優點是節省IP …

Django1.9開發博客06- 模板繼承

模板繼承就是網站的多個頁面可以共享同一個頁面布局或者是頁面的某幾個部分的內容。通過這種方式你就需要在每個頁面復制粘貼同樣的代碼了。 如果你想改變頁面某個公共部分&#xff0c;你不需要每個頁面的去修改&#xff0c;只需要修改一個模板就行了&#xff0c;這樣最大化復用…

樂高機器人亮劍_2500名選手大比拼 全球機器人廣州從化“亮劍”

導讀&#xff1a;國際機器人從化總動員學生自己編程、拼裝的機器人既能像相撲手一樣摔跤&#xff0c;又能像蜘蛛俠一樣爬上爬下。還有智能垃圾處理系統&#xff0c;瞄準城市垃圾分類下的“痛點”。在2019RoboRAVE國際教育機器人大會全球總決賽的現場&#xff0c;只有想不到&…

python 編碼問題_Python電源挑戰| 競爭編碼問題

python 編碼問題Question: 題&#xff1a; A power function is that positive number that can be expressed as x^x i.e x raises to the power of x, where x is any positive number. You will be given an integer array A and you need to print if the elements of arr…

lvs負載均衡—高可用集群(keepalived)

基本概念&#xff1a; 什么是Keepalived呢&#xff0c;keepalived觀其名可知&#xff0c;保持存活&#xff0c;在網絡里面就是保持在線了&#xff0c;也就是所謂的高可用或熱備&#xff0c;用來防止單點故障(單點故障是指一旦某一點出現故障就會導致整個系統架構的不可用)的發…

定期定量采購_企業常見的六種采購策略

注冊職業采購經理CPPM考試網?www.apscppm.com對不起&#xff0c;我是采購合同生效的條件是什么&#xff1f;怎樣制定談判方案&#xff1f;如何在采購時讓供應商聽你的指揮&#xff01;沒做預算不能采購&#xff0c;應該作為企業采購管理的基本原則。編制現金預算就是要解決收入…

stringreader_Java StringReader markSupported()方法與示例

stringreaderStringReader類markSupported()方法 (StringReader Class markSupported() method) markSupported() method is available in java.io package. markSupported()方法在java.io包中可用。 markSupported() method is used to check whether this StringReader strea…

pacemaker+corosync實現集群管理

前言: 高可用集群&#xff0c;是指以減少服務中斷&#xff08;如因服務器宕機等引起的服務中斷&#xff09;時間為目的的服務器集群技術。簡單的說&#xff0c;集群就是一組計算機&#xff0c;它們作為一個整體向用戶提供一組網絡資源。這些單個的計算機系統就是集群的節點。 …

分頁導航的實現方法

這個導航是閱讀了精通css這本書后做的demo&#xff0c;感覺以前寫的真的是弱爆了 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style type"text/css">ol.n…

更換mysql_這些被你忽視的MySQL細節,可能會讓你丟飯碗!

我們在 MySQL 入門篇主要介紹了基本的 SQL 命令、數據類型和函數&#xff0c;在具備以上知識后&#xff0c;你就可以進行 MySQL 的開發工作了&#xff0c;但是如果要成為一個合格的開發人員&#xff0c;你還要具備一些更高級的技能&#xff0c;下面我們就來探討一下 MySQL 都需…

Java RandomAccessFile skipBytes()方法與示例

RandomAccessFile類skipBytes()方法 (RandomAccessFile Class skipBytes() method) skipBytes() method is available in java.io package. skipBytes()方法在java.io包中可用。 skipBytes() method is used to skip the given number of bytes in this file and possibly set …

rhcs集群套件—紅帽6的高可用

含義及理解&#xff1a; RHCS是Red Hat Cluster Suite的縮寫&#xff0c;也就是紅帽子集群套件&#xff0c;RHCS是一個能夠提供高可用性、高可靠性、負載均衡、存儲共享且經濟廉價的集群工具集合&#xff0c;&#xff0c;它將集群系統中三大集群架構&#xff08;高可用性集群、…

MapReduce二次排序

2019獨角獸企業重金招聘Python工程師標準>>> 默認情況下&#xff0c;Map輸出的結果會對Key進行默認的排序&#xff0c;但是有時候需要對Key排序的同時還需要對Value進行排序&#xff0c;這時候就要用到二次排序了。下面我們來說說二次排序 1、二次排序原理 我們把二…

數據有序_詳解數據庫插入性能優化:合并+事務+有序數據進行INSERT操作

概述對于一些數據量較大的系統&#xff0c;數據庫面臨的問題除了查詢效率低下&#xff0c;還有就是數據入庫時間長。特別像報表系統&#xff0c;每天花費在數據導入上的時間可能會長達幾個小時或十幾個小時之久。因此&#xff0c;優化數據庫插入性能是很有意義的。其實最有效的…

Java ProcessBuilder environment()方法與示例

ProcessBuilder類的environment()方法 (ProcessBuilder Class environment() method) environment() method is available in java.lang package. environment()方法在java.lang包中可用。 environment() method is used to return Map interfaces of this process builder env…

容器內應用日志收集方案

容器化應用日志收集挑戰 應用日志的收集、分析和監控是日常運維工作重要的部分&#xff0c;妥善地處理應用日志收集往往是應用容器化重要的一個課題。 Docker處理日志的方法是通過docker engine捕捉每一個容器進程的STDOUT和STDERR&#xff0c;通過為contrainer制定不同log dri…

python統計行號_利用Python進行數據分析(第三篇上)

上一篇文章我記錄了自己在入門 Python 學習的一些基礎內容以及實際操作代碼時所碰到的一些問題。這篇我將會記錄我在學習和運用 Python 進行數據分析的過程&#xff1a;介紹 Numpy 和 Pandas 兩個包運用 Numpy 和 Pandas 分析一維、二維數據數據分析的基本過程實戰項目【用 Pyt…

lnmp架構搭建—源碼編譯(nginx、mysql、php)

含義及理解&#xff1a; LNMP LinuxNginxMysqlPHP&#xff1a;LNMP是指一組通常一起使用來運行動態網站或者服務器的自由軟件名稱首字母縮寫。L指Linux&#xff0c;N指Nginx&#xff0c;M一般指MySQL&#xff0c;也可以指MariaDB&#xff0c;P一般指PHP&#xff0c;也可以指P…

Java PipedInputStream available()方法與示例

PipedInputStream類的available()方法 (PipedInputStream Class available() method) available() method is available in java.io package. available()方法在java.io包中可用。 available() method is used to return the number of available bytes left that can be read …

解析xml_Mybatis中mapper的xml解析詳解

上一篇文章分析了mapper注解關鍵類MapperAnnotationBuilder&#xff0c;今天來看mapper的項目了解析關鍵類XMLMapperBuilder。基礎介紹回顧下之前是在分析configuration的初始化過程&#xff0c;已經進行到了最后一步mapperElement(root.evalNode("mappers"))&#x…