React Native 是一种使用 JavaScript 构建原生应用的框架，它非常适合用于 iOS 和 Android 平台的应用程序开发。TextInput 是实现输入框的一种原生组件，React Native 中可以使用它来创建输入框。
TextInput 组件的基本用法
安装和导入
在使用 TextInput 组件之前，需要先安装并导入 React Native。安装过程请参照官方文档，这里不再赘述。
导入 TextInput 组件：
import {TextInput} from 'react-native';创建输入框
要创建一个输入框，可以使用如下代码：
<TextInput />
这样就创建了一个默认的输入框。可以通过设置 props 来修改输入框的样式和行为。
<TextInput
style={styles.input}
onChangeText={text => setText(text)}
value={text}
/>这个代码片段定义了一个输入框，它的样式由 style 属性控制。onChangeText 属性绑定了一个回调函数，当用户输入的值发生变化时会被调用。value 属性用于显示当前输入框的值。
高亮和选择文字
TextInput 组件允许用户长按输入框中的文字来选择和复制。默认情况下，当用户点击或长按输入框时，输入框会出现高亮效果。
可以通过设置 selectionColor 属性来设置高亮的颜色。也可以使用 onSelectionChange 属性来检测选中的文本范围。
-- -------------------- ---- -------
----------
--------------------
---------------------
---------------------------------- --
------------
---------- ------- ----------------------------
---------- ----- -------------------------
-
-
--常见输入框类型
在开发 App 时，我们通常需要多种不同类型的输入框。这里列举了几种常见的输入框类型及其实现方式。
密码输入框
<TextInput
style={styles.input}
secureTextEntry={true}
/>secureTextEntry 属性指定输入框的内容应该显示为“*”或隐蔽字符，用于实现密码输入框。
数字输入框
<TextInput
style={styles.input}
keyboardType="numeric"
/>keyboardType 属性用于指定键盘类型。numeric 指定输入框应显示数字键盘，用于实现数字输入框。
多行输入框
<TextInput
style={styles.input}
multiline={true}
numberOfLines={4}
/>multiline 属性指示输入框可以包含多行文本。numberOfLines 属性指定输入框的行数，如果未设置则为默认值 1。
TextInput 组件的深入探究
输入框的行为
TextInput 组件的行为由一些基本属性控制，这些属性用于处理输入框与用户的交互。
onChangeText
onChangeText 是 TextInput 组件最基本的属性之一，它指定一个回调函数，当文本变化时会调用该函数。回调函数的参数即为当前输入框的值。
<TextInput
style={styles.input}
onChangeText={text => console.log(text)}
/>onChange
onChange 属性指定一个回调函数，当文本变化时会调用该函数，并传递一个事件对象作为参数。事件对象的 nativeEvent 属性包含了输入框的值和一些其他属性。
<TextInput
style={styles.input}
onChange={({nativeEvent}) => console.log(nativeEvent.text)}
/>onFocus/onBlur
onFocus 和 onBlur 属性用于处理输入框获得或失去焦点时的事件。
<TextInput
style={styles.input}
onFocus={() => console.log('Focused')}
onBlur={() => console.log('Blurred')}
/>输入框的状态
TextInput 组件的状态由一些状态属性控制，这些属性用于呈现输入框的当前状态。
value 和 defaultValue
value 属性用于指定当前输入框的值。defaultValue 属性用于指定输入框的默认值。当用户修改了输入框的值时，value 属性会被更新并触发相应的回调函数，而 defaultValue 属性不会被修改并不会触发相应的回调函数。
<TextInput
style={styles.input}
onChangeText={text => setText(text)}
value={text}
defaultValue="Default value"
/>editable
editable 属性用于指定输入框是否可编辑。当设置为 false 时，用户无法修改输入框的值。
<TextInput
style={styles.input}
onChangeText={text => setText(text)}
value={text}
editable={false}
/>此时用户不能编辑输入框。
selectionColor
selectionColor 属性用于指定高亮颜色。这个属性非常实用，可以帮助用户更好地识别当前选中的文本。
<TextInput
style={styles.input}
selectionColor="#f00"
/>onFocus/onBlur
onFocus 和 onBlur 事件不仅可以用于处理输入框的行为，还可以用于处理输入框的状态。
<TextInput
style={styles.input}
onFocus={() => setBorderColor('#f00')}
onBlur={() => setBorderColor('#ddd')}
style={{borderColor: borderColor, borderWidth: 1}}
/>这段代码在输入框获取焦点时将边框颜色改为红色，在失去焦点时恢复为灰色。
输入框的样式
TextInput 组件的样式由一些样式属性控制，这些属性通常用于控制输入框的外观和布局。
style
style 属性用来指定输入框的样式。
<TextInput
style={styles.input}
onChangeText={text => setText(text)}
value={text}
/>placeholder 和 placeholderTextColor
placeholder 属性指定输入框没有文本时显示的提示文本。placeholderTextColor 属性指定提示文本的颜色。
<TextInput
style={styles.input}
onChangeText={text => setText(text)}
value={text}
placeholder="Enter your text here"
placeholderTextColor="#ccc"
/>autoCapitalize
autoCapitalize 属性指定文本自动大写的方式。它支持以下几个值：
- none
- words
- characters
- sentences
<TextInput
style={styles.input}
onChangeText={text => setText(text)}
value={text}
autoCapitalize="sentences"
/>keyboardAppearance
keyboardAppearance 属性指定键盘外观。它支持以下两个值：
- default
- light
- dark
<TextInput
style={styles.input}
onChangeText={text => setText(text)}
value={text}
keyboardAppearance="dark"
/>TextInput 组件的最佳实践
控制输入框的值
在使用 TextInput 组件时，通常需要将其值保存在状态变量中，并通过 onChangeText 属性控制文本的变化。
const [text, setText] = useState('');
<TextInput
style={styles.input}
onChangeText={text => setText(text)}
value={text}
/>输入框的布局
在设计应用程序时，经常会需要将多个输入框放到同一个页面中。此时，应该优先考虑输入框的布局问题。
使用 flex 属性通常是一种非常方便的方式，用于调整多个组件相对于父组件的位置和大小。也可以使用 position 属性和 margin 属性进行布局。
-- -------------------- ---- -------
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------------
--
------ -
------ ------
------- ---
------------------ ---
------------ -------
------------ --
--
---示例代码
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ -
-----------
-----
-----
----------
----------------
- ---- ---------------
------ ------- -------- ----- -
----- ------ -------- - -------------
----- ------------- --------------- - -----------------
----- ----------- - -- -- -
------------------
-
------ -
----- -------------------------
----------
--------------------- ------------- --------------
------------------ -- --------------
------------
----------- -- -----------------------
---------- -- -----------------------
------------------ ---- ---- -----
---------------------------
--------------------------
---------------------
----------------------
--------------------------
--
----------------- --------------------- ----------------------
----- ---------------------------------------
-------------------
-------
--
-
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
------ -
------ ------
------- ---
------------------ ---
------------ -------
------------ --
--
------- -
---------- ---
---------------- ---
------------------ ---
---------------- -------
------------- --
--
----------- -
------ -------
--------- ---
----------- -------
--
---总结
使用 TextInput 组件实现输入框是 React Native 开发中非常常见的一项任务。我们可以通过 onChangeText 属性和 value 属性来控制输入框的值，通过 placeholder 属性和 placeholderTextColor 属性来设置提醒文本，通过 keyboardType 属性和 secureTextEntry 属性来设置键盘类型和显示模式。对于输入框的样式和布局，我们可以通过使用 flex 属性和 position 属性来控制组件的布局和大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492d5a148841e98940a204b