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" } }