react-native IOS键盘遮挡如何解决

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‘的优点，但是更加灵活

缺点: 网友的私人开源项目，不知道有没有什么坑

相关链接

使用CocoaPods管理项目

react-native-keyboard-mgr