bugfix
This commit is contained in:
tdzl2003
parent
d42276fd0f
commit
ebb089d763
25
README.md
25
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组件
|
||||
|
||||
## 属性
|
||||
|
||||
### distance: number (default 50)
|
||||
|
||||
当输入框非常靠近底部的时候,会自动和键盘保持一定的距离。这可以为你其它的组件留出空间。
|
||||
|
||||
### tapToDismiss: boolean (default true)
|
||||
|
||||
是否可以点击ScrollView来关闭键盘。
|
||||
181
index.js
181
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 (
|
||||
<View
|
||||
style = {{flex:1}}
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}}
|
||||
>
|
||||
<ScrollView
|
||||
<View
|
||||
style = {{flex:1}}
|
||||
contentContainerStyle = {[{alignItems : 'stretch',}]}
|
||||
keyboardShouldPersistTaps = {tapToDismiss?true:keyboardShouldPersistTaps}
|
||||
ref={(srcollView) => {
|
||||
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}
|
||||
</ScrollView>
|
||||
</View>
|
||||
>
|
||||
<ScrollView
|
||||
style = {{flex:1}}
|
||||
contentContainerStyle = {[{alignItems : 'stretch',}]}
|
||||
keyboardShouldPersistTaps = {tapToDismiss?true:keyboardShouldPersistTaps}
|
||||
ref={(srcollView) => {
|
||||
this.scrollViewRef = srcollView;
|
||||
}}
|
||||
onMomentumScrollEnd = {e=>{
|
||||
if (!this.moved) {
|
||||
this.offsetY = Math.max(0, e.nativeEvent.contentOffset.y)
|
||||
}
|
||||
}}
|
||||
{...others}
|
||||
>
|
||||
{children}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue