解决react-native键盘遮挡输入框

码农公社  210.net.cn   210= 1024  10月24日一个重要的节日--码农(程序员)节

Android上已经自动对键盘遮挡输入框做了处理,所以我们只需要关注ios。


  1. 首先引入 KeyboardAvoidingView 


import { KeyboardAvoidingView } from 'react-native';

  

  2.然后在页面的最外层加上 KeyboardAvoidingView


render(){     
return <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}>         
{/*具体页面内容*/}     
</KeyboardAvoidingView> }


如果适配ios和Android,可以将页面提取出来


getPageView = () => {
         //return 具体页面内容     
         }     
 getPlatformView = () => {
          if (Platform.OS === 'ios') {
                       return <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}>
                                            {this.getPageView()}
                           </KeyboardAvoidingView>         } 
                           else {
                                        return this.getPageView();
                                                 }    
                                                  };      
                                                  render() {         
                                                  return this.getPlatformView();     
                                                  }


源自https://www.cnblogs.com/bygw/p/11327141.html

评论