zoukankan      html  css  js  c++  java
  • [React Native] Prevent the On-screen Keyboard from Covering up Text Inputs

    When you bring up the on screen keyboard in a mobile app, it will cover any text input or buttons on the bottom half of the screen, which can be frustrating for users. There are a few common ways to deal with this in React Native - and this video shows the following solutions:

    First, you can use the built in KeyboardAvoidingView to move components around when the keyboard comes on screen. It has the advantage to being built in to React Native already - but it can be overly complicated to get this approach to work consistently across both iOS and Android.

    There is also a third party library called KeyboardAwareScrollView, which will allow your entire view to scroll, and will keep the currently selected text inputs up and out of the way of the keyboard.

    Install:

    npm i -D react-native-keyboard-aware-scroll-view

    Use:

    import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
    
    export default class App extends Component {
      render() {
        return (
          <KeyboardAwareScrollView
            style={{ flex: 1 }}
          >
    
              <View style={styles.loginHeader}>
                <Text style={styles.headerText}>App Name</Text>
              </View>
    
              <View style={styles.loginInputs}>
                <Text style={styles.label}>Username</Text>
                <TextInput 
                  placeholder="Username"
                  style={styles.input}
                />
                <Text style={styles.label}>Password</Text>
                <TextInput 
                  placeholder="Password"
                  style={styles.input}
                  secureTextEntry={true} 
                />
                <TouchableOpacity style={styles.loginButton}>
                  <Text style={styles.loginText}>Login</Text>
                </TouchableOpacity>
              </View>
    
          </KeyboardAwareScrollView>
        );
      }
    }
  • 相关阅读:
    项目沟通管理
    项目人力资源管理
    项目质量管理
    项目成本管理
    项目时间管理
    项目的范围管理
    css3:flex overflow ellipsis 层级处理
    Python3.7在win10下安装PyAudio库以及实现音频的录制与播放
    利用爬虫、SMTP和树莓派3B发送邮件&续集&(爬取墨迹天气预报信息)
    利用爬虫、SMTP和树莓派3B发送邮件(爬取墨迹天气预报信息)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9384090.html
Copyright © 2011-2022 走看看