React Native

2020-08-05  本文已影响0人  aiingstan

StyleSheet.compose(style, {})

KeyboardAvoidingView

It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height.
KeyboardAvoidingView 是一个 View 组件,订阅了键盘相关的事件,再根据设定的页面布局响应方式和属性值,来根据键盘的高度,自动调整自身的高度位置,或者是底部边距

React Native 源代码 - https://github.com/facebook/react-native/blob/master/Libraries/Components/Keyboard/KeyboardAvoidingView.js

KeyboardAvoidingView 的属性寥寥无几,但是可以说是 React Native 中最难使用的组件之一了

behavior

NOTE:

Android and iOS both interact with this prop differently. On both iOS and Android, setting behavior is recommended.

behavior 设置成为 position 的时候,KeyboardAvoidingView 会多创建一个新的 View 来作为内容容器,且为该视图设置 contentContainerStyle

case 'position':
        return (
          <View
            ref={this.viewRef}
            style={style}
            onLayout={this._onLayout}
            {...props}>
            <View
              style={StyleSheet.compose(contentContainerStyle, {
                bottom: bottomHeight,
              })}>
              {children}
            </View>
          </View>
        );

keyboardVerticalOffset

上一篇下一篇

猜你喜欢

热点阅读