TextInput

用于文本输入的 Jetpack Compose 文本输入组件。

Android

Bundled version:

~55.0.2

Expo UI TextInput 与官方 Jetpack Compose TextField API 相匹配，并支持单行和多行文本输入以及各种键盘类型。

🌐 Expo UI TextInput matches the official Jetpack Compose TextField API and supports single-line and multiline text input with various keyboard types.

安装

🌐 Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

🌐 Usage

基本文本输入

🌐 Basic text input

BasicTextInputExample.tsx

import { useState } from 'react';
import { Host, TextInput } from '@expo/ui/jetpack-compose';

export default function BasicTextInputExample() {
  const [value, setValue] = useState('Hello, world!');

  return (
    <Host matchContents>
      <TextInput defaultValue={value} onChangeText={setValue} autocorrection={false} />
    </Host>
  );
}

多行文本输入

🌐 Multiline text input

MultilineTextInputExample.tsx

import { useState } from 'react';
import { Host, TextInput } from '@expo/ui/jetpack-compose';

export default function MultilineTextInputExample() {
  const [value, setValue] = useState('');

  return (
    <Host matchContents>
      <TextInput defaultValue={value} onChangeText={setValue} multiline={true} numberOfLines={4} />
    </Host>
  );
}

数字键盘

🌐 Numeric keyboard

NumericTextInputExample.tsx

import { useState } from 'react';
import { Host, TextInput } from '@expo/ui/jetpack-compose';

export default function NumericTextInputExample() {
  const [value, setValue] = useState('');

  return (
    <Host matchContents>
      <TextInput defaultValue={value} onChangeText={setValue} keyboardType="numeric" />
    </Host>
  );
}

应用接口

🌐 API

import { TextInput } from '@expo/ui/jetpack-compose';

Component

`TextInput`

Android

Type: React.Element<TextInputProps>

Renders a TextInput component.

TextInputProps

`autoCapitalize`

Android

Optional • Literal type: string • Default: none

Options to request software keyboard to capitalize the text. Applies to languages which has upper-case and lower-case letters.

Available options:

characters: Capitalize all characters.
none: Do not auto-capitalize text.
sentences: Capitalize the first character of each sentence.
unspecified: Capitalization behavior is not specified.
words: Capitalize the first character of every word.

Acceptable values are: 'characters' | 'none' | 'sentences' | 'unspecified' | 'words'

`autocorrection`

Android

Optional • Type: boolean • Default: true

If true, autocorrection is enabled.

`defaultValue`

Android

Optional • Type: string

Initial value that the TextInput displays when being mounted. As the TextInput is an uncontrolled component, change the key prop if you need to change the text value.

`keyboardType`

Android

Optional • Literal type: string • Default: default

Determines which keyboard to open. For example, 'numeric'.

Available options:

default
numeric
email-address
phone-pad
decimal-pad
ascii-capable
url
password
password-numeric

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`multiline`

Android

Optional • Type: boolean

If true, the text input can be multiple lines. While the content will wrap, there's no keyboard button to insert a new line.

`numberOfLines`

Android

Optional • Type: number • Default: undefined, which means unlimited lines.

The number of lines to display when multiline is set to true. If the number of lines in the view is above this number, the view scrolls.

`onChangeText`

Android

Type: (value: string) => void

A callback triggered when user types in text into the TextInput.

`ref`

Android

Optional • Type: Ref<TextInputRef>

Can be used for imperatively setting text on the TextInput component.

Types

`TextInputRef`

Android

Property	Type	Description
setText	`(newText: string) => Promise<void>`	-