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(),

    })

  }

//页面渲染

你可能感兴趣的:(ReactNative、小程序键盘遮挡问题)