反应-内生-键盘-意识-滚动-视图

处理键盘外观并自动滚动到焦点的 ScrollView 组件 TextInput。 。 。 .

支持的版本

• v2.0.0 需求 RN>=0.65.1
• v1.0.0 需求 RN>=0.63.0

安装

安装可以通过 npm数字 :

npm i @codler/react-native-keyboard-aware-scroll-view --save

使用量

你可以用这个 KeyboardAwareScrollView, (中文(简体) ), KeyboardAwareSectionList 或 KeyboardAwareFlatList 组件。 他们接受 ScrollView, (中文(简体) ), SectionList 财务报告和审定财务报表 FlatList 默认道具和 执行自定义高顺序组件 KeyboardAwareHOC 用于处理键盘外观. 高顺序组件也可以使用,如果您想将其用于其他组件.

导入 react-native-keyboard-aware-scroll-view 将内容包入其中 内容:

import { KeyboardAwareScrollView } from '@codler/react-native-keyboard-aware-scroll-view'

<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

自动滚动 TextInput 字段

截止 v0.1.0,组件自动滚动到焦点 TextInput 😎. 对于版本 v0.0.7 更年长的,你可以做以下.

程序滚动到任意 TextInput

滚动到任意 TextInput 字段,您可以使用内置方法 scrollToFocusedInput示例:

_scrollToInput (reactNode: any) {
  // Add a 'scroll' ref to your ScrollView
  this.scroll.props.scrollToFocusedInput(reactNode)
}

<KeyboardAwareScrollView
  innerRef={ref => {
    this.scroll = ref
  }}>
  <View>
    <TextInput
      onFocus={(event: Event) => {
        // `bind` the function if you're using ES6 classes
        this._scrollToInput(ReactNative.findNodeHandle(event.target))
      }}
    />
  </View>
</KeyboardAwareScrollView>

程序滚动到任意位置

还有一个内置的功能,允许您按程序滚动到滚动视图的任何位置:

this.scroll.props.scrollToPosition(0, 0)

输入键盘事件

您可以注册到 ScrollViewResponder 事件 onKeyboardWillShow 财务报告和审定财务报表 onKeyboardWillHide数字 :

<KeyboardAwareScrollView
  onKeyboardWillShow={(frames: Object) => {
    console.log('Keyboard event', frames)
  }}>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Android 支持软件

首先,Android本土有这个功能,你可以很容易地通过设置来启用它 windowSoftInputMode 内 AndroidManifest.xml检查 这里。 。 。 .

但如果你想使用像 extraHeight,您需要启用Android支持,其步骤如下:

• 确定您使用反应本地化 0.46 或以上(或以上(一).
• 设定 windowSoftInputMode 改为 adjustPan 内 AndroidManifest.xml。 。 。 .
• 设定 enableOnAndroid 属性改为 true。 。 。 .

Android 支持不完美, 这里有所支持的列表 :

API 密码

道具

所有的东西 ScrollView编号 :FlatList 道具会通过.

方法

使用 innerRef 以获取组件引用和使用 this.scrollRef.props 获得这些方法.

使用高订单组件

使任何组件都具有键盘意识是非常容易的. 看看密码 KeyboardAwareFlatList数字 :

/* @flow */

import { FlatList } from 'react-native'
import listenToKeyboardEvents from './KeyboardAwareHOC'

export default listenToKeyboardEvents(FlatList)

也可以配置HOC. 有时提供静态配置比用道具配置行为更方便. 此 HOC 配置可以被道具所覆盖 .

/* @flow */

import { FlatList } from 'react-native'
import listenToKeyboardEvents from './KeyboardAwareHOC'

const config = {
  enableOnAndroid: true,
  enableAutomaticScroll: true
}

export default listenToKeyboardEvents(config)(FlatList)

可用的配置选项有:

{
  enableOnAndroid: boolean,
  contentContainerStyle: ?Object,
  enableAutomaticScroll: boolean,
  extraHeight: number,
  extraScrollHeight: number,
  enableResetScrollToCoords: boolean,
  keyboardOpeningTime: number,
  viewIsInsideTabBar: boolean,
  refPropName: string,
  extractNativeRef: Function
}