React NativeReact NativeReact-Native 开发阵营

React Native iOS Keyboard issue

2017-07-31  本文已影响195人  TingTingLand

React Native iOS keyboard avoiding view的坑,需求要实现一个带header的textInput,为了让header跟textInput看起来是一体的,header和textInput外部包裹一层scrollView,在文本输入的时候,textInput的高度动态变化,scrollView滚动,安卓上面默认就是这种效果,iOS上面不能,随着输入的文本增加,textInput会被键盘遮挡,所以此处考虑如何解决iOS上面键盘弹出遮挡view的问题。

<KeyboardAvoidingView behavior="position" keyboardVerticalOffset={-64}>
  <MyView/>
</KeyboardAvoidingView>

后来,需求变动,position不能满足需求,改用height,然而,height模式下有bug,键盘收起时,height不能恢复原位。
https://github.com/facebook/react-native/issues/13754
此路不通,思考其他解决方案。

<KeyboardAwareScrollView style={styles.view} ref="scroll"
            onKeyboardWillShow={(frames) => {
              console.log('keyboard will show', frames);
              this.setState({
                keyboardHeight: frames.endCoordinates.height,
                keyboardShow: true,
                screenHeight: screenHeight - 64- 40 - frames.endCoordinates.height
              });
            }}
            onKeyboardWillHide={(frames) => {
              this.setState({
                keyboardShow: false,
                screenHeight: screenHeight - 64- 40
              });
            }}
            onContentSizeChange={(contentWidth, contentHeight) => {
              const imageHeight = this.props.source ? ((theme.screenWidth - 32) * 3) / 4 : 0
              if ((contentHeight - imageHeight) > this.state.screenHeight) {
                const y = 60 + 16 + Math.max(this.state.height, 73) - this.state.screenHeight
                console.log(y);
                if (y > 0) {
                  this.refs.scroll.scrollToPosition(0, y, false)
                }
              }
            }}>
    <MyView/>
</KeyboardAwareScrollView>

P.S.但愿这个世界上没那么多反代码的设计。

上一篇下一篇

猜你喜欢

热点阅读