ReactNative、小程序键盘遮挡问题

需求:

1、用AnimatedView制作动画,兼容小程序

2、安卓机不用处理键盘遮挡问题,其会自适应,但是ios不会。需要用以下代码控制

解决:

componentDidMount = ()=>{

    // 添加键盘监听

    if (Platform.OS === 'ios') {

      this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardDidShow.bind(this));

      this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardDidHide.bind(this));

    }

 };

_keyboardDidShow(event) {

    //避免使用event.startCoordinates,因为初次和后期获取高度不一样,导致显示问题。所以尽量用endCoordinates

    this.handleKeyboardAvoidAnim(this.duration, event.endCoordinates.height);

}

_keyboardDidHide(event) {

    this.handleKeyboardAvoidAnim(this.duration, 0);

}

//动画

handleKeyboardAvoidAnim(duration, y) {

    if (Platform.OS === 'ios') {

      y = y - JDNativeSystem.iphoneXMarginBottom

    }

    let toValue = - bottomMargin - y;

    let animationTran = createAnimation({

      duration: duration,

      timingFunction: 'ease',

    });

    animationTran.translateY(toValue).step();

    this.setState({

      animationTranslateY: animationTran.export(),

    })

  }

//页面渲染

<AnimatedView  animation={this.state.animationTranslateY}></AnimatedView>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容