1.KeyboardAvoidingView
通过react-native 自带的这个组件可以解决一些常见的问题
优点: 即拿即用方便快捷
缺点: 有部分情况解决起来不是很好
2.CocoaPods 安装 Ios的 ‘IQKeyboardManager’
通过pods 来安装 ‘IQKeyboardManager’ 来解决全局的的键盘弹出事件
安装方法也很简单,先安装CocoaPods
然后进到项目的ios文件夹下建立Podfile,终端执行
pod install
编辑Podfile
增加‘IQKeyboardManager’
# Uncomment the next line to define a global platform for your project
platform :ios, '8.0'
target 'App' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
pod "IQKeyboardManager"
end
然后终端执行
pod install
搞定后直接重新build项目发现全局的键盘弹出遮挡问题都已经解决。
优点: 集成一次后几乎不用考虑键盘遮挡问题,也不需要在代码上做什么
缺点: 对native的依赖比较大,另一个是对全局生效,无法禁止,除非通过修改native代码来增加方法给js调用才能禁止。
3.新方法 react-native-keyboard-mgr
多亏了网友的努力出现了新的方案,就是将‘IQKeyboardManager’封装成npm插件,像其他的插件一样
yarn add react-native-keyboard-mgr
//or
npm install --save react-native-keyboard-mgr
Api
使用API
npm install --save react-native-keyboard-mgr
setEnabled
如果你想在某些场景禁用键盘自适应,只需要使用setEnabled(false)就可以了,
如果你想启用, 只需要使用setEnabled(true)就可以了。
setEnableAutoToolbar
还可以自定义是否开启自带的工具条
setShouldShowTextInputPlaceholder,setPlaceholderFont
修改placholder的显示和隐藏,和字体大小
setShouldResignOnTouchOutside
点击背景是否收起键盘
例子:
import KeyBorardManager from 'react-native-keyboard-mgr';
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}
render() {
KeyBorardManager.setEnabled(true)
KeyBorardManager.setEnableAutoToolbar(false)
KeyBorardManager.setShouldShowTextInputPlaceholder(false)
KeyBorardManager.setShouldResignOnTouchOutside(false)
KeyBorardManager.setPlaceholderFont(10)
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={(text) => this.setState({ text })}
value={this.state.text}
/>
</View>
);
}
}
优点: 综合了’IQKeyboardManager‘的优点,但是更加灵活
缺点: 网友的私人开源项目,不知道有没有什么坑
相关链接