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>
);