`<Input>`

一个适用于 ReactLynx 的无样式输入框组件，提供文本输入和键盘感知基础能力。

输入框组件，支持受控、非受控及键盘避让能力，单行输入使用 <Input>，多行输入使用 <TextArea>。

基础用法

使用 <Input> 渲染单行输入框，使用 <TextArea> 渲染多行文本域。

使输入框抬起以避让键盘

通过自动调整视图来防止屏幕键盘遮挡输入框

结构

<KeyboardAwareRoot>
  <view className='container'>
    <KeyboardAwareResponder>
      <KeyboardAwareTrigger>
          <Input
            style={{
              width: '100%',
              padding: '10px',
              backgroundColor: 'yellow',
            }}
          />
      </KeyboardAwareTrigger>
      <KeyboardAwareTrigger>
          <TextArea
            style={{
              width: '100%',
            }}
            placeholder="textareaId:'textarea2'"
          />
      </KeyboardAwareTrigger>
    </KeyboardAwareResponder>
  </view>
<KeyboardAwareRoot>

API

TextAreaProps

bounces

iOS

类型boolean·默认值true

输入框是否开启 iOS bounces 效果

className

iOS

Android

Harmony

类型string

类名

confirmType

iOS

Android

Harmony

类型send | search | go | done | next·默认值'send'

输入框确认按钮类型

defaultValue

iOS

Android

Harmony

类型string

输入框默认值

iOS

Android

Harmony

类型string·默认值'input'

输入框 id

inputFilter

iOS

Android

Harmony

类型string

输入框内容过滤正则表达式

lineSpacing

iOS

Android

类型number | px | rpx

输入框行间距

maxLength

iOS

Android

Harmony

类型number·默认值140

输入框最大长度

maxLines

iOS

Android

Harmony

类型number·默认值40

输入框最大输入行数

onBlur

iOS

Android

Harmony

类型(value: string) => void

输入框失焦事件

onConfirm

iOS

Android

Harmony

类型(value: string) => void

输入框确认按钮点击事件

onFocus

iOS

Android

Harmony

类型(value: string) => void

输入框聚焦事件

onInput

iOS

Android

Harmony

类型(value: string, selectionStart: number, selectionEnd: number, isComposing: boolean) => void

输入框内容改变事件

onSelectionChange

iOS

Android

Harmony

类型(selectionStart: number, selectionEnd: number) => void

输入框选择范围改变事件

placeholder

iOS

Android

Harmony

类型string

输入框占位符

readonly

iOS

Android

Harmony

类型boolean·默认值false

输入框是否可交互

ref

类型ForwardedRef

showSoftInputOnFocus

iOS

Android

Harmony

类型boolean·默认值true

输入框是否聚焦时显示软键盘

style

iOS

Android

Harmony

类型CSSProperties

样式

type

iOS

Android

Harmony

输入框内容类型

value

iOS

Android

Harmony

类型string

输入框受控值

KeyboardAwareTriggerProps

children

iOS

Android

Harmony

类型ReactNode

输入框键盘感知组件的子元素

className

iOS

Android

Harmony

类型string

类名

offset

iOS

Android

Harmony

类型number·默认值0

输入框键盘感知组件的额外偏移量, 单位是 px

style

iOS

Android

Harmony

类型CSSProperties

样式

KeyboardAwareRootProps

androidStatusBarPlusBottomBarHeight

Android

类型number·默认值0

需要设置 Android 状态栏高度和底部导航栏的高度，如果是沉浸式状态栏，则只需传入底部导航栏的高度

children

iOS

Android

Harmony

类型ReactNode

输入框键盘响应组件的子元素

forceAttach

iOS

Android

Harmony

类型boolean·默认值false

是否强制吸附到键盘上方

KeyboardAwareResponderProps

androidTouchSlop

Android

类型default | paging

Android 触摸识别模式，当处于支持 'paging' 模式的元件中时，需要开启 'paging' 模式。

iOS

Android

Harmony

类型View | ScrollView·默认值'View'

输入框键盘响应组件的根元素类型

bounceable

iOS

Android

类型boolean

启用弹性效果

bounceableOptions

iOS

Android

类型

boolean | {alwaysBouncing?: boolean, debugLog?: boolean, enableBounceEventInFling?: boolean, enableBounces: boolean, endBounceTriggerDistance?: number, estimatedHeight?: number, estimatedWidth?: number, lowerBounceItem?: any, onScrollToBounces?: (e: {direction: upper | lower}) => void, singleSidedBounce?: upper | lower | both | iOSBounces | none, startBounceTriggerDistance?: number, upperBounceItem?: any, validAnimationVersion?: boolean}

·默认值{ enableBounces: true, singleSidedBounce: "iOSBounces" },

弹性效果的参数

children

iOS

Android

类型ReactNode

scroll-view 的子元素。

className

iOS

Android

Harmony

类型string

类名

enableScroll

iOS

Android

Harmony

类型boolean·默认值true

启用滚动。

enableScrollMonitor

iOS

Android

Harmony

类型boolean·默认值false

启用滚动监控。

estimatedItemStyle

iOS

Android

类型CSSProperties

需要设置 items 的预计高度和宽度。

exposureBottom

iOS

Android

类型string·默认值'10px'

曝光屏幕下方边距

exposureID

iOS

Android

Harmony

类型string

用于全局曝光的 exposure-id

exposureLeft

iOS

Android

类型string·默认值'10px'

曝光屏幕左侧边距

exposureRight

iOS

Android

类型string·默认值'10px'

曝光屏幕右侧边距

exposureScene

iOS

Android

Harmony

类型string

用于全局曝光的 exposure-scene

exposureTop

iOS

Android

类型string·默认值'10px'

曝光屏幕上方边距

firstScreenItemCount

iOS

Android

类型number·默认值1

懒加载时预计的第一页项数。剩余的子元素会基于曝光状态完成渲染。当此预估较小时，可能会导致第一屏出现空白现象。

iOSBounces

iOS

Android

类型boolean·默认值true

开启iOS上的回弹效果。如果想在安卓上使用，请参考bounceableOption。如果设置了bounceableOption，iOSBounces属性将失效。

lazy

iOS

Android

类型boolean·默认值true

启用懒渲染。只有当用户滚动到可见区域时，才会渲染 items，从而减少初始加载时间和内存使用。

lazyOptions

iOS

Android

类型LazyOptions·默认值true

启用懒渲染。只有当用户滚动到可见区域时，才会渲染 items，从而减少初始加载时间和内存使用。

main-thread:gesture

iOS

Android

类型BaseGesture

如果想使用 gesture API，请传入该属性。

onUIAppear

iOS

Android

Harmony

类型(e: CommonEvent) => void

UI 的曝光事件。

onUIDisappear

iOS

Android

Harmony

类型(e: CommonEvent) => void

UI 的消失事件。

ref

类型ForwardedRef

scene

iOS

Android

类型string

用于标记懒加载的曝光时机。请确保页面中唯一。

scrollMonitorTag

iOS

Android

Harmony

类型string·默认值false

滚动监控的标签。

scrollOrientation

iOS

Android

Harmony

类型horizontal | vertical·默认值'vertical'

设置为 'vertical' 为垂直滚动，设置为 'horizontal' 为水平滚动。

scrollPropagationBehavior

iOS

Android

类型ScrollPropagationBehaviorOption·默认值'native'

控制滚动事件是否向父级容器传递。'preventPropagate' 在 iOS 上暂时需与 temporaryBlockScrollClass 和 temporaryBlockScrollTag 配合使用。 Currently, this property has limitations because its full functionality depends on a higher native SDK version: on iOS, propagate only works if both the parent and this component are set to propagate and useRefactorList={true} does not support 'propagate'. On Android, preventPropagate only functions when the parent is x-swiper or x-viewpager-ng.

scrollviewId

iOS

Android

类型string·默认值"scrollview"

滚动视图的id。

sticky

iOS

Android

类型ReactElement

粘性元素，设计用于 Tabs。

style

iOS

Android

类型CSSProperties

Styles for KeyboardAwareResponder KeyboardAwareResponder 的样式

temporaryBlockScrollClass

iOS

类型string·默认值'BDXLynxViewPager'

当 scrollPropagationBehavior 设为 'preventPropagate' 时，被阻止滚动的容器的具体类名。'preventPropagate' 需与 temporaryBlockScrollClass 和 temporaryBlockScrollTag 配合使用。 This is a temporary props and will be deprecated on new Lynx SDK version.

temporaryBlockScrollTag

iOS

类型number·默认值0

用于指定当 scrollPropagationBehavior 设为 'preventPropagate' 时被阻止滚动的原生容器标签（对应 UIView 的 Tag 属性）。该值需由原生容器提供方指定，且 'preventPropagate' 必须与 temporaryBlockScrollClass 和 temporaryBlockScrollTag 配合使用。 This is a temporary props and will be deprecated on new Lynx SDK version.

temporaryNestedScroll

Android

类型boolean

仅 Android 生效的临时开关，用于控制嵌套滚动冲突；映射到原生属性 'enable-nested-scroll'。Android上默认开启。

testing

iOS

Android

类型boolean

测试模式

catchLongPress

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

与 onLongPress 相同，但会阻止事件冒泡。

catchTouchCancel

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

与 onTouchCancel 相同，但会阻止事件冒泡。

catchTouchEnd

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

与 onTouchEnd 相同，但会阻止事件冒泡。

catchTouchMove

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

与 onTouchMove 相同，但会阻止事件冒泡。

catchTouchStart

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

与 onTouchStart 相同，但会阻止事件冒泡。

onContentSizeChange

iOS

Android

类型(res: Record<string, unknown>) => void

滚动内容变化时触发。

onLayoutChange

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

当 UI 视口大小改变时发送。

onLongPress

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

当触摸点在 UI 上按住一段时间后发送。

onScroll

iOS

Android

类型(e: ScrollEvent) => void

滚动时触发。

onScrollEnd

iOS

Android

类型(e: [object Object] | undefined) => void·默认值undefined

滚动停止时触发。

onScrollToLower

iOS

Android

类型(e: [object Object] | undefined) => void·默认值undefined

滚动到底部时触发。

onScrollToUpper

iOS

Android

类型(e: [object Object] | undefined) => void·默认值undefined

滚动到顶部时触发。

onTap

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

当触摸点在 UI 上轻触时发送。

onTouchCancel

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

当触摸事件在完成前被中断或取消时发送。

onTouchEnd

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

当触摸点从 UI 上移除时发送。

onTouchMove

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

当触摸点在 UI 上移动时发送。

onTouchStart

iOS

Android

Harmony

类型(e: EventHandler | undefined) => void

当触摸点放置在 UI 上时发送。

InputProps

className

iOS

Android

Harmony

类型string

类名

confirmType

iOS

Android

Harmony

类型send | search | go | done | next·默认值'send'

输入框确认按钮类型

defaultValue

iOS

Android

Harmony

类型string

输入框默认值

iOS

Android

Harmony

类型string·默认值'input'

输入框 id

inputFilter

iOS

Android

Harmony

类型string

输入框内容过滤正则表达式

maxLength

iOS

Android

Harmony

类型number·默认值140

输入框最大长度

onBlur

iOS

Android

Harmony

类型(value: string) => void

输入框失焦事件

onConfirm

iOS

Android

Harmony

类型(value: string) => void

输入框确认按钮点击事件

onFocus

iOS

Android

Harmony

类型(value: string) => void

输入框聚焦事件

onInput

iOS

Android

Harmony

类型(value: string, selectionStart: number, selectionEnd: number, isComposing: boolean) => void

输入框内容改变事件

onSelectionChange

iOS

Android

Harmony

类型(selectionStart: number, selectionEnd: number) => void

输入框选择范围改变事件

placeholder

iOS

Android

Harmony

类型string

输入框占位符

readonly

iOS

Android

Harmony

类型boolean·默认值false

输入框是否可交互

ref

类型ForwardedRef

showSoftInputOnFocus

iOS

Android

Harmony

类型boolean·默认值true

输入框是否聚焦时显示软键盘

style

iOS

Android

Harmony

类型CSSProperties

样式

type

iOS

Android

Harmony

输入框内容类型

value

iOS

Android

Harmony

类型string

输入框受控值

TextAreaRef

blur

iOS

Android

Harmony

类型() => Promise

释放输入框焦点

focus

iOS

Android

Harmony

类型() => Promise

聚焦输入框

getValue

iOS

Android

Harmony

类型() => Promise

获取输入框内容

setSelectionRange

iOS

Android

Harmony

类型(selectionStart: number, selectionEnd: number) => Promise

设置输入框选中范围

setValue

iOS

Android

Harmony

类型(value: string) => Promise

设置输入框内容

KeyboardAwareResponderRef

类型() => [object Object]

InputRef

blur

iOS

Android

Harmony

类型() => Promise

释放输入框焦点

focus

iOS

Android

Harmony

类型() => Promise

聚焦输入框

getValue

iOS

Android

Harmony

类型() => Promise

获取输入框内容

setSelectionRange

iOS

Android

Harmony

类型(selectionStart: number, selectionEnd: number) => Promise

设置输入框选中范围

setValue

iOS

Android

Harmony

类型(value: string) => Promise

设置输入框内容

#<Input>

#基础用法

#使输入框抬起以避让键盘

#结构

#API

#TextAreaProps

#KeyboardAwareTriggerProps

#KeyboardAwareRootProps

#KeyboardAwareResponderProps

#InputProps

#TextAreaRef

#KeyboardAwareResponderRef

#InputRef

`<Input>`

基础用法

使输入框抬起以避让键盘

结构

API

TextAreaProps

KeyboardAwareTriggerProps

KeyboardAwareRootProps

KeyboardAwareResponderProps

InputProps

TextAreaRef

KeyboardAwareResponderRef

InputRef