点击界面任意处键盘收起
import {
Keyboard,
TouchableOpacity,
} from 'react-native';
<TouchableOpacity
onPress={() => { Keyboard.dismiss(); }}
activeOpacity={1} style={{flex: 1}}>
</TouchableOpacity >
键盘遮挡问题:
1.使用KeyboardAvoidingView
import {KeyboardAvoidingView} from 'react-native';
@observable top = getPixel(100);
<ScrollView>
<KeyboardAvoidingView behavior='position' keyboardVerticalOffset={this.top}>
<LoginInput
onFocus={() => { this.top = getPixel(40); }}/>
<LoginInput
onFocus={() => { this.top = getPixel(100); }}/>
<LoginInput
onFocus={() => { this.top = getPixel(100); }}/>
</KeyboardAvoidingView>
</ScrollView>
LoginInput.js
onFocus=() => {
const {onFocus} = this.props;
onFocus && onFocus();
}
render(){
return(
<TextInput onFocus={this.onFocus}/>
)
}
2.使用第三方库：KeyboardAwareScrollView
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
<KeyboardAwareScrollView
extraHeight={140}
keyboardOpeningTime={10}
style={{
marginTop: getTitlePixel(64),
}}>
<View></View>
</KeyboardAwareScrollView>
参考借鉴：
KeyboardAwareScrollView详细见react-native-keyboard-aware-scroll-view git
