diff --git a/1224/react-native-keyboard-aware-scroll-view.md b/1224/react-native-keyboard-aware-scroll-view.md new file mode 100644 index 0000000000000000000000000000000000000000..5ed15df9b8684174ae2680c22feb7d42c58736b7 --- /dev/null +++ b/1224/react-native-keyboard-aware-scroll-view.md @@ -0,0 +1,125 @@ +> 模板版本:v0.1.2 + +

+

react-native-keyboard-aware-scroll-view

+

+

+ + Supported platforms + + + License + +

+ + +>[!tip] [Github 地址](https://github.com/APSL/react-native-keyboard-aware-scroll-view) + +## 安装与使用 + +进入到工程目录并输入以下命令: + + + +#### **yarn** + +```bash +yarn add react-native-keyboard-aware-scroll-view@0.9.5 +``` +#### **npm** + +```bash +npm install react-native-keyboard-aware-scroll-view@0.9.5 --save +``` + + + +下面的代码展示了这个库的基本使用场景: + +```tsx +import React from 'react'; +import { + TextInput, + StyleSheet, + ScrollView, +} from 'react-native'; +import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'; + + +const KasvCom: React.FC = (): JSX.Element => { + return ( + <> + + + + + + + ); +}; + +const styles = StyleSheet.create({ + input: { + width: '90%', + marginLeft: '5%', + borderWidth: 2, + borderColor: 'black', + height: 40, + borderRadius: 10, + fontSize: 26, + paddingLeft: 6, + marginTop: 10, + marginBottom: 10, + } +}); + +export default KasvCom; +``` + +## 约束与限制 + +### 兼容性 + + 在下述版本验证通过: + + 1. IDE:DevEco Studio 4.1.3.500;SDK:HarmonyOS(api11) 4.1.5.6;测试设备:Mate60(BRA-AL00);ROM:2.0.0.50(SP2DEVC00E60R4P1log);RNOH:0.72.13 + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +以下属性已验证,详情见 [react-native-keyboard-aware-scroll-view源库地址](https://github.com/APSL/react-native-keyboard-aware-scroll-view) + +**组件 KeyboardAwareScrollView** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ---- | ---- | -------- | -------- | -------- | +| viewIsInsideTabBar | Adds an extra offset that represents the `TabBarIOS` height. | boolean | NO | All | NO | +| resetScrollToCoords | Coordinates that will be used to reset the scroll when the keyboard hides. | Object: {x: number, y: number} | NO | All | NO | +| enableAutomaticScroll | When focus in `TextInput` will scroll the position, default is enabled. | boolean | NO | All | NO | +| extraHeight | Adds an extra offset when focusing the `TextInput`s. | number | NO | All | NO | +| extraScrollHeight | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. | number | NO | All | NO | +| enableResetScrollToCoords | Lets the user enable or disable automatic resetScrollToCoords. | boolean | NO | All | NO | +| keyboardOpeningTime | Sets the delay time before scrolling to new position, default is 250 | number | NO | IOS | NO | +| keyboardWillShow | What to do when the keyboard is about to appear | (event?) => void | NO | IOS | NO | +| keyboardDidShow | What to do when the keyboard appears | (event?) => void | NO | All | Yes | +| keyboardWillHide | What to do when the keyboard is about to be hidden | (event?) => void | NO | IOS | NO | +| keyboardDidHide | What to do when hiding the keyboard | (event?) => void | NO | All | Yes | +| keyboardWillChangeFrame | When the keyboard status is about to change | (event?) => void | NO | IOS | NO | +| keyboardDidChangeFrame | When the keyboard status changes | (event?) => void | NO | IOS | NO | +| scrollToPosition | Scroll to specific position with or without animation. | (x: number, y: number, animated: bool = true) => void | NO | All | Yes | +| scrollToEnd | Scroll to end with or without animation. | (animated?: bool = true) => void | NO | All | Yes | +| scrollIntoView | Scrolls an element inside a KeyboardAwareScrollView into view. | (element: React.Element<*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } }) => void | NO | All | NO | + + +## 遗留问题 + +- [ ] 受RNOH侧UIManager.viewIsDescendantOf() API的影响,键盘事件判断后的回调函数无法执行,导致主动视图Scroll滚动API均无法生效。 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/meliorence/react-native-render-html/blob/master/LICENSE) ,请自由地享受和参与开源。