React Native 处理键盘遮挡输入框问题
在移动端上，输入框被软键盘遮挡是一个非常常见的问题，为此，RN原生的提供了一个组件 KeyboardAvoidingView 来处理这个问题，KeyboardAvoidingView的主要属性behavior 包含三个’height’, ‘position’, ‘padding’, 使用最多的就是 padding,具体的可以到官网上查看，但在实际项目中发现，登录页面使用这个组件没有问题，但在其他的输入页中使用该组件，却发现失效，具体什么原因目前也一直在排查。但是时间来不及，所以只能另寻他法。
一种直接的方法就是每次输入框聚焦时，获取软件盘的高度，然后让输入框上移，当然，在RN中获取软键盘的相关信息是没有问题的。
具体上代码
一、KeyboardAvoidingView
javascript 代码
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
TextInput,
KeyboardAvoidingView
} from 'react-native';
export default class Root extends Component {
render() {
return (
<KeyboardAvoidingView behavior='position' >
<ScrollView>
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
Text>
<Text style={styles.welcome}>
Welcome to React Native!
Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
Text>
<Text style={styles.welcome}>
Welcome to React Native!
Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
Text>
<Text style={styles.welcome}>
Welcome to React Native!
Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
Text>
<Text style={styles.welcome}>
Welcome to React Native!
Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
Text>
<Text style={styles.instructions}>
KeyboardAvoidingView的主要属性behavior PropTypes.oneOf(['height', 'position', 'padding'])
Text>
<TextInput
placeholder="输入框"
style={{width:300,height:100,borderWidth:1}}
/>
View>
ScrollView>
KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});二、获取软键盘的高度
javascript 代码
/**
* Created by shaotingzhou on 2017/2/23.
*/
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Keyboard,
TextInput,
Dimensions
} from 'react-native';
var ScreenWidth = Dimensions.get('window').width;
export default class Root extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
keyboardHeight:0
};
}
render() {
return (
Welcome to React Native!
To get started, edit index.android.js
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
To get started, edit index.android.js
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
To get started, edit index.android.js
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
To get started, edit index.android.js
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
100,borderWidth:2,marginBottom:this.state.keyboardHeight}}
/>
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
componentWillMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}
_keyboardDidShow(e){
this.setState({
keyboardHeight:e.startCoordinates.height
})
}
_keyboardDidHide(e){
this.setState({
keyboardHeight:0
})
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});