React Native TextInput组件常用属性

TextInput组件是一种常用的React Native文本输入框组件。它允许用户在应用程序中输入文本，将其作为表单输入的一部分进行提交或将其保存到本地存储中。下面将罗列一下TextInput组件常用的属性：

style

style 属性可以设置 TextInput 的样式，边距、字体、圆角等等都可以配置

<TextInput style={styles.input} />
const styles = StyleSheet.create({
    input: {
    margin: 12,
    padding: 4,
    height: 140,
    fontSize: 18,
    color: '#333333',
    fontWeight: 'bold',
    borderColor: 'red',
    borderRadius: 4,
    borderWidth: 1,
  },
});

autoFocus

用于设置 TextInput 是否自动唤起键盘，当属性值为 true 时将自动唤起键盘, 默认值为 false

<TextInput autoFocus={true} />

blurOnSubmit

输入框提交时键盘是否自动收起，属性值为true时收起吗，默认值是true

<TextInput blurOnSubmit={true} />

caretHidden

输入框光标是否隐藏，属性值为true时隐藏，默认值是false

<TextInput caretHidden={true} />

placeholder

在输入文本之前展示的字符串，常用于引导说明

<TextInput placeholder='Please input' />

value

用于将TextInput的值设置为指定的字符串

<TextInput value={"Hello World"} />

defaultValue

提供一个初始值，该值将在用户开始键入时更改

<TextInput defaultValue={"Hello World"} />

secureTextEntry

secureTextEntry属性用于隐藏TextInput中输入的文本，以便在输入密码或其他敏感信息时确保用户的隐私和安全

<TextInput secureTextEntry={true} />

keyboardType

keyboardType属性确定TextInput应该显示哪种类型的键盘

<TextInput keyboardType='numeric' />

returnKeyType

returnKeyType属性确定TextInput输入完成后下一步操作的类型

<TextInput returnKeyType='done' />

maxLength

maxLength属性指定TextInput中最大字符数

<TextInput maxLength={30} />

multiline

是否支持多行，属性值为true时支持多行，默认值是false

<TextInput multiline={true} />

onFocus

TextInput 聚焦时触发该回调

<TextInput onFocus={() => { console.log(`onFocus`); }} />

onChange

在TextInput中输入文本时触发的回调函数，每次输入一个字符，onChange函数都会被调用

<TextInput onChange={(e) => console.log(e.nativeEvent.text)} />

onChangeText

作用基本与onChange 一致，不同的是回调参数是每次输入后 TextInput 的文本内容

<TextInput onChangeText={(text) => console.log(text)} />

onSubmitEditing

当用户提交TextInput中的文本时触发的回调函数

<TextInput onSubmitEditing={(e) => console.log(`You submitted: ${e.nativeEvent.text}`)} />

TextInput组件常用属性