Question

hai我正在尝试使用react-native显示键盘时，我跟着@sherlock的评论（How to auto-slide the window out from behind keyboard when TextInput has focus?我收到了这样的错误

我不知道如何解决这个错误，任何人都可以帮我解决这个问题，任何帮助都非常感激。

Answer 1

在react-native github问题上有一个很好的讨论 https://github.com/facebook/react-native/issues/3195#issuecomment-147427391

我会从那里开始，但是这里有一些你可能会觉得有用的链接，其中一个链接已在你引用的文章中提到过......

Answer 2

在我的图书馆＆＃34; react-native-form-generator＆＃34; （https://github.com/MichaelCereda/react-native-form-generator）我做了以下事情。

我创建了一个Keyboard Aware滚动视图（部分修改自https://github.com/facebook/react-native/issues/3195#issuecomment-146518331）

以下它只是摘录

export class KeyboardAwareScrollView extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      keyboardSpace: 0,
    }
    this.updateKeyboardSpace = this.updateKeyboardSpace.bind(this)
    this.resetKeyboardSpace = this.resetKeyboardSpace.bind(this)
  }


  updateKeyboardSpace (frames) {

    let coordinatesHeight = frames.endCoordinates.height;
    const keyboardSpace = (this.props.viewIsInsideTabBar) ? coordinatesHeight - 49 : coordinatesHeight
    this.setState({
      keyboardSpace: keyboardSpace,
    })

  }

  resetKeyboardSpace () {
    this.setState({
      keyboardSpace: 0,
    })
  }

  componentDidMount () {
    // Keyboard events
    DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace)
    DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace)
  }

  componentWillUnmount () {
    DeviceEventEmitter.removeAllListeners('keyboardWillShow')
    DeviceEventEmitter.removeAllListeners('keyboardWillHide')
  }

  scrollToFocusedInput (event, reactNode, extraHeight = 69) {
    const scrollView = this.refs.keyboardScrollView.getScrollResponder();
    setTimeout(() => {
      scrollView.scrollResponderScrollNativeHandleToKeyboard(
        reactNode, extraHeight, true
      )
    }, 220)
  }

  render () {
    return (
      <ScrollView
        ref='keyboardScrollView'
        keyboardDismissMode='interactive'
        contentInset={{bottom: this.state.keyboardSpace}}
        showsVerticalScrollIndicator={true}
        style={this.props.style}>
        {this.props.children}
      </ScrollView>
    )
  }

然后我像其他任何滚动视图一样使用它

import { KeyboardAwareScrollView } from 'react-native-form-generator'
...
handleFormFocus(event, reactNode){
   this.refs.scroll.scrollToFocusedInput(event, reactNode)
}
...
  <KeyboardAwareScrollView ref='scroll'>
    <Form ref='registrationForm'
      onFocus={this.handleFormFocus.bind(this)}
      onChange={this.handleFormChange.bind(this)}
      label="Personal Information">
      ........
    </Form>
</KeyboardAwareScrollView>

更改我的组件（Form）将调用KeyboardAwareScrollView中的scrollToFocusedInput（使用ref）。

我建议查看我的图书馆的代码（请参阅顶部的链接），或者只是使用它（它已经测试过并且正在工作的所有内容）。

如果您还有其他问题，请发表评论

当键盘如react-native所示时向上移动视图

2 个答案: