前端之家收集整理的这篇文章主要介绍了
React-Native学习之 防止键盘遮挡TextInput,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
import React,{Component} from 'react';
import ReactNative,{
AppRegistry, StyleSheet, Text, View, Image, TextInput, Dimensions, Platform, TouchableOpacity, ScrollView,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'
var {width,height}=Dimensions.get('window')
export default class Login extends Component {
_reset() {
this.refs.scrollView.scrollTo({y: 0});
}
_onFocus(refName) {
setTimeout(() => {
let scrollResponder = this.refs.scrollView.getScrollResponder();
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
ReactNative.findNodeHandle(this.refs[refName]),10,true);
},100);
}
render() {
return (
<ScrollView
scrollEnabled={false} //防止滑动
contentContainerStyle={{flex:1}}
ref="scrollView">
<View style={styles.container}>
<TextInput
ref="textInput"
onBlur={this._reset.bind(this)}
onFocus={this._onFocus.bind(this,'textInput')}
keyboardType={'numeric'}
placeholder='站点地址(URL)'
style={styles.username}/>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#4396d3', },
username: {
width: width - 40, height: 40, backgroundColor: 'white',
}
});