美文网首页
React Native

React Native

作者: aiingstan | 来源:发表于2020-08-05 17:14 被阅读0次

    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

    相关文章

      网友评论

          本文标题:React Native

          本文链接:https://www.haomeiwen.com/subject/ltgnrktx.html