React Native 其他组件之 KeyboardAvoid

本组件用于解决一个常见的尴尬问题：手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的位置，调整自身的 position 或底部的 padding，以避免被遮挡。

属性

名称	类型	说明
keyboardVerticalOffset	number	有时候应用离屏幕顶部还有一些距离（比如状态栏等等），利用此属性来补偿修正这段距离。
behavior	enum('height', 'position', 'padding')	注意：Android 和 iOS 在此属性上表现并不一致。 Android 可能不指定此属性更好，而 iOS 可能相反。
contentContainerStyle	View.style	如果设定 behavior 值为'position'，则会生成一个 View 作为内容容器。此属性用于指定此内容容器的样式。
enabled	boolean	是否启用KeyboardAvoidingView。

用法

import { KeyboardAvoidingView } from 'react-native';

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
  ... 在这里放置需要根据键盘调整位置的组件 ...
</KeyboardAvoidingView>

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  KeyboardAvoidingView
} from 'react-native';

export default class App extends Component { 
  render() {
    return (
        <View style={styles.container}>
        <KeyboardAvoidingView
          behavior='padding'
          style={styles.container}
        >
          <TextInput
            underlineColorAndroid={'white'}
            placeholder='这是一个简单的输入框'
            style={styles.textInput}
          />
        </KeyboardAvoidingView>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingHorizontal: 20,
    paddingTop:20
  },
  textInput: {
    borderRadius: 5,
    borderWidth: 1,
    height: 140,
    paddingHorizontal: 10
  }
});

2. 效果图

keyboard.jpg