diff --git a/README.md b/README.md
index ac4cdc5..06ac813 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,36 @@
# react-native-inputscrollview
-防止键盘弹出时候,输入框被遮挡
+
+1. 防止键盘弹出时候,输入框被遮挡
+2. 解决在ScrollView中点击其它元素时需要点击两次才能生效的问题
## 如何安装
+0.35以上:
+
```bash
npm install react-native-inputscrollview --save
rnpm link react-native-inputscrollview
```
+0.34以下:
+
+```bash
+npm install react-native-inputscrollview@1.x --save
+rnpm link react-native-inputscrollview
+
+```
+
+
## 如何使用
-用InputScrollView替换InputView外层的ScrollView组件
\ No newline at end of file
+用InputScrollView替换InputView外层的ScrollView组件
+
+## 属性
+
+### distance: number (default 50)
+
+当输入框非常靠近底部的时候,会自动和键盘保持一定的距离。这可以为你其它的组件留出空间。
+
+### tapToDismiss: boolean (default true)
+
+是否可以点击ScrollView来关闭键盘。
\ No newline at end of file
diff --git a/index.js b/index.js
index f450e46..38f9fd7 100644
--- a/index.js
+++ b/index.js
@@ -2,22 +2,22 @@
* Created by lvbingru on 12/16/15.
*/
-import React, {Component, PropTypes, } from 'react';
-import ReactNative, {InteractionManager, View, Text, ScrollView, Platform, Animated, UIManager, NativeModules, Dimensions} from 'react-native';
+import React, {Component, PropTypes } from 'react';
+import ReactNative, {
+ InteractionManager, View, Text, ScrollView, Platform, Animated, UIManager, NativeModules, Dimensions,
+ Keyboard,
+} from 'react-native';
import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
-import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';
-import packageData from 'react-native/package.json';
-import semver from 'semver';
const ViewPlugins = NativeModules.InputScrollViewPlugin;
+const dismissKeyboard = Keyboard.dismiss;
const propTypes = {
distance : PropTypes.number,
tapToDismiss : PropTypes.bool,
- onKeyboardWillShow : PropTypes.func,
}
const defaultProps = {
- distance : 160,
+ distance : 50,
tapToDismiss : true,
}
@@ -33,92 +33,104 @@ export default class InputScrollView extends Component {
this.moved = false;
}
+ componentWillMount() {
+ this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.onKeyboardWillShow);
+ this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this.onKeyboardWillHide);
+ }
+
+ componentWillUnmount() {
+ this.keyboardWillShowListener.remove();
+ this.keyboardWillHideListener.remove();
+ }
+
+ onKeyboardWillShow = e => {
+ if (!this.scrollViewRef) {
+ return;
+ }
+ const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
+ if (currentlyFocusedTextInput != null) {
+ ViewPlugins && ViewPlugins.isSubview(
+ currentlyFocusedTextInput,
+ this.scrollViewRef.getInnerViewNode(),
+ r => {
+ if (r === true) {
+ this.move(currentlyFocusedTextInput, e)
+ }
+ });
+ }
+ };
+ onKeyboardWillHide = e=> {
+ if (!this.scrollViewRef) {
+ return;
+ }
+ if (this.moved) {
+ this.moved = false;
+ this.scrollToY(this.offsetY);
+ }
+ };
+
render() {
const {distance, tapToDismiss, onKeyboardWillShow, keyboardShouldPersistTaps, children, ...others} = this.props
return (
- {
- if (tapToDismiss === true) {
- const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
- if (e.target != currentlyFocusedTextInput) {
- if (ViewPlugins && ViewPlugins.isTextInput) {
- ViewPlugins.isTextInput(
- e.target,
- r => {
- if (r===false) {
- dismissKeyboard();
- }
- }
- );
- }
- else {
- dismissKeyboard();
- }
- }
- }
- return false;
- }}
- >
- {
- this.scrollViewRef = srcollView;
- }}
- onKeyboardWillShow = {e => {
- if (!this.scrollViewRef) {
- return;
+ onStartShouldSetResponderCapture = {e=>{
+ if (tapToDismiss === true) {
+ const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
+ if (e.target != currentlyFocusedTextInput) {
+ if (ViewPlugins && ViewPlugins.isTextInput) {
+ ViewPlugins.isTextInput(
+ e.target,
+ r => {
+ if (r===false) {
+ dismissKeyboard();
+ }
+ }
+ );
+ }
+ else {
+ dismissKeyboard();
+ }
+ }
}
- const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
- if (currentlyFocusedTextInput != null) {
- ViewPlugins && ViewPlugins.isSubview(
- currentlyFocusedTextInput,
- this.scrollViewRef.getInnerViewNode(),
- r => {
- if(r===true) {this.move(currentlyFocusedTextInput, e)}
- });
- }
- onKeyboardWillShow && onKeyboardWillShow(e);
+ return false;
}}
- onKeyboardWillHide = {e=> {
- if (!this.scrollViewRef) {
- return;
- }
- if (this.moved) {
- this.moved = false;
- this.scrollToY(this.offsetY);
- }
- }}
- onMomentumScrollEnd = {e=>{
- if (!this.moved) {
- this.offsetY = Math.max(0, e.nativeEvent.contentOffset.y)
- }
- }}
- {...others}
- >
- {children}
-
-
+ >
+ {
+ this.scrollViewRef = srcollView;
+ }}
+ onMomentumScrollEnd = {e=>{
+ if (!this.moved) {
+ this.offsetY = Math.max(0, e.nativeEvent.contentOffset.y)
+ }
+ }}
+ {...others}
+ >
+ {children}
+
+
);
}
move(currentlyFocusedTextInput, e) {
UIManager.measureLayout(
- currentlyFocusedTextInput,
- ReactNative.findNodeHandle(this.scrollViewRef.getInnerViewNode()),
- e=>{console.warning(e)},
- (left, top, width, height)=>{
- let keyboardScreenY = Dimensions.get('window').height;
- if (e && e.endCoordinates) {
- keyboardScreenY = e.endCoordinates.screenY;
- }
- let scrollOffsetY = top - keyboardScreenY + height + this.props.distance;
- scrollOffsetY = Math.max(this.offsetY, scrollOffsetY);
- this.scrollToY(scrollOffsetY);
- }
+ currentlyFocusedTextInput,
+ ReactNative.findNodeHandle(this.scrollViewRef.getInnerViewNode()),
+ e=>{console.warning(e)},
+ (left, top, width, height)=>{
+ let keyboardScreenY = Dimensions.get('window').height;
+ if (e) {
+ keyboardScreenY = e.endCoordinates.screenY;
+ }
+ let scrollOffsetY = top - keyboardScreenY + height + this.props.distance;
+ scrollOffsetY = Math.max(this.offsetY, scrollOffsetY);
+ this.scrollToY(scrollOffsetY);
+ }
);
this.moved = true;
}
@@ -128,12 +140,7 @@ export default class InputScrollView extends Component {
}
scrollToY(offsetY) {
- if (semver.gte(packageData.version, '0.20.0')) {
- this.scrollViewRef.scrollTo({x:0, y:offsetY});
- }
- else {
- this.scrollViewRef.scrollTo(offsetY, 0);
- }
+ this.scrollViewRef.scrollTo({x:0, y:offsetY});
}
}
diff --git a/package.json b/package.json
index 3f9f928..1e6bb4a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-inputscrollview",
- "version": "1.0.3",
+ "version": "2.0.0",
"description": "输入框位置动态调整",
"main": "index.js",
"scripts": {
@@ -24,5 +24,8 @@
"homepage": "https://github.com/reactnativecn/react-native-inputscrollview.git%22#readme",
"dependencies": {
"semver": "^5.1.0"
+ },
+ "peerDependencies": {
+ "react-native": "^0.35.0"
}
}