v1.9.0

fixed #48

Author: baijunjie

README.md

@@ -98,6 +98,7 @@ _onContentSizeChange = ({nativeEvent:event}) => {
 
 | Property                | Type     | Default | Description                              |
 | ----------------------- | -------- | ------- | ---------------------------------------- |
+| `topOffset`        | `number` | `undefined` | The offset of the `InputScrollView` relative to the top of the window. When the screen contains `TopBar`, it is usually set to the height of `TopBar`. If not explicitly set, the program will automatically determine, but may cause problems [issues#43](https://github.com/baijunjie/react-native-input-scroll-view/issues/43)。 |
 | `keyboardOffset`        | `number` | `40`    | When automatic adjustment, the cursor relative to the top of the keyboard offset. |
 | `multilineInputStyle`   | `Style`  | `null`  | If your multiline `TextInput` has a specific style, to ensure that the cursor can be accurately adjusted to the top of the keyboard, this is set as a multiline `TextInput` style, The style attributes that mainly include `fontSize`、`fontFamily`、`lineHeight` etc. affect the position of the cursor. **Be careful not to include `width` and `height`**. |
 | `useAnimatedScrollView` | `bool`   | `false` | Replace regular `ScrollView` component with `Animated.ScrollView` component. |

__test__/react-native-input-scroll-view/index.js

@@ -65,6 +65,7 @@ if (isIOS) {
 
 export default class extends PureComponent {
     static propTypes = {
+        topOffset: PropTypes.number,
         keyboardOffset: PropTypes.number,
         multilineInputStyle: PropTypes.oneOfType([
             PropTypes.object,
@@ -93,8 +94,8 @@ export default class extends PureComponent {
         this._curFocus = null;
         this._measureCallback = null;
         this._keyboardShow = false;
-        this._topOffset = 0;
         this._inputInfoMap = {};
+        this._topOffset = this.props.topOffset;
 
         this._addListener();
         this._extendScrollViewFunc();
@@ -106,6 +107,7 @@ export default class extends PureComponent {
 
     render() {
         const {
+            topOffset,
             keyboardOffset,
             multilineInputStyle,
             useAnimatedScrollView,
@@ -265,12 +267,18 @@ export default class extends PureComponent {
             this._root = this._root._component;
         }
 
-        setTimeout(() => {
+        const getTopOffset = () => {
+            this.props.topOffset === undefined &&
             this._root._innerViewRef &&
             this._root._innerViewRef.measureInWindow((x, y) => {
                 this._topOffset = y;
             });
-        });
+        };
+
+        setTimeout(getTopOffset);
+        // 如果屏幕是带动画进入，那么初次获取的位置偏移量并不准确，需要等动画听指挥重新计算
+        // 这里暂定等待时间为 1000 毫秒
+        setTimeout(getTopOffset, 1000);
     };
 
     _scrollToKeyboardRequest = () => {

index.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ScrollViewProperties, TextStyle, ScrollView } from 'react-native';
 
 export interface InputScrollViewProps extends ScrollViewProperties {
+  readonly topOffset?: number;
   readonly keyboardOffset?: number;
   readonly multilineInputStyle?: TextStyle;
   readonly useAnimatedScrollView?: boolean;

index.js

@@ -65,6 +65,7 @@ if (isIOS) {
 
 export default class extends PureComponent {
     static propTypes = {
+        topOffset: PropTypes.number,
         keyboardOffset: PropTypes.number,
         multilineInputStyle: PropTypes.oneOfType([
             PropTypes.object,
@@ -93,8 +94,8 @@ export default class extends PureComponent {
         this._curFocus = null;
         this._measureCallback = null;
         this._keyboardShow = false;
-        this._topOffset = 0;
         this._inputInfoMap = {};
+        this._topOffset = this.props.topOffset;
 
         this._addListener();
         this._extendScrollViewFunc();
@@ -106,6 +107,7 @@ export default class extends PureComponent {
 
     render() {
         const {
+            topOffset,
             keyboardOffset,
             multilineInputStyle,
             useAnimatedScrollView,
@@ -265,12 +267,18 @@ export default class extends PureComponent {
             this._root = this._root._component;
         }
 
-        setTimeout(() => {
+        const getTopOffset = () => {
+            this.props.topOffset === undefined &&
             this._root._innerViewRef &&
             this._root._innerViewRef.measureInWindow((x, y) => {
                 this._topOffset = y;
             });
-        });
+        };
+
+        setTimeout(getTopOffset);
+        // 如果屏幕是带动画进入，那么初次获取的位置偏移量并不准确，需要等动画听指挥重新计算
+        // 这里暂定等待时间为 1000 毫秒
+        setTimeout(getTopOffset, 1000);
     };
 
     _scrollToKeyboardRequest = () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-input-scroll-view",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "description": "Perfect TextInput ScrollView",
   "main": "index.js",
   "types": "index.d.ts",

中文说明.md

@@ -97,6 +97,7 @@ _onContentSizeChange = ({nativeEvent:event}) => {
 
 | 属性                      | 类型       | 默认值     | 描述                                       |
 | ----------------------- | -------- | ------- | ---------------------------------------- |
+| `topOffset`        | `number` | `undefined` | `InputScrollView` 相对于窗口顶部的偏移量。当屏幕包含 `TopBar` 时，通常设置为 `TopBar` 的高度。如果未明确设置，程序会自动判断，但是可能会引起问题 [issues#43](https://github.com/baijunjie/react-native-input-scroll-view/issues/43)。|
 | `keyboardOffset`        | `number` | `40`    | 当自动调整时，光标相对于键盘顶部的偏移量。                    |
 | `multilineInputStyle`   | `Style`  | `null`  | 如果你的多行输入框有特定的样式，那么为了光标能够精准调整到键盘上方，应该将多行文本的样式也设置在这里，主要包含 `fontSize`、`fontFamily`、`lineHeight` 等会影响到光标位置的样式属性。**注意，不要包含 `width` 和 `height`**。 |
 | `useAnimatedScrollView` | `bool` | `false` | 用 `Animated.ScrollView` 组件替换 `ScrollView` 组件。 |