当TextInput有焦点时，如何从键盘后面自动滑出窗口？

Question

我见过这种原生应用程序自动滚动窗口的方法，但我想知道在React native中最好的方法…当一个

您可以在示例UIExplorer的TextInputExample.js视图中看到此问题。

有人有好的解决方案吗？




Answer 1

我们将react-native-keyboard-spacer的一些代码和@夏洛克的代码结合起来，创建了一个KeyboardHandler组件，可以用TextInput元素包装任何视图。非常管用！:-)

/**
 * Handle resizing enclosed View and scrolling to input
 * Usage:
 *    <KeyboardHandler ref='kh' offset={50}>
 *      <View>
 *        ...
 *        <TextInput ref='username'
 *          onFocus={()=>this.refs.kh.inputFocused(this,'username')}/>
 *        ...
 *      </View>
 *    </KeyboardHandler>
 * 
 *  offset is optional and defaults to 34
 *  Any other specified props will be passed on to ScrollView
 */
'use strict';

var React=require('react-native');
var {
  ScrollView,
  View,
  DeviceEventEmitter,
}=React;


var myprops={ 
  offset:34,
}
var KeyboardHandler=React.createClass({
  propTypes:{
    offset: React.PropTypes.number,
  },
  getDefaultProps(){
    return myprops;
  },
  getInitialState(){
    DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{
      if (!frames.endCoordinates) return;
      this.setState({keyboardSpace: frames.endCoordinates.height});
    });
    DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{
      this.setState({keyboardSpace:0});
    });

    this.scrollviewProps={
      automaticallyAdjustContentInsets:true,
      scrollEventThrottle:200,
    };
    // pass on any props we don't own to ScrollView
    Object.keys(this.props).filter((n)=>{return n!='children'})
    .forEach((e)=>{if(!myprops[e])this.scrollviewProps[e]=this.props[e]});

    return {
      keyboardSpace:0,
    };
  },
  render(){
    return (
      <ScrollView ref='scrollView' {...this.scrollviewProps}>
        {this.props.children}
        <View style={{height:this.state.keyboardSpace}}></View>
      </ScrollView>
    );
  },
  inputFocused(_this,refName){
    setTimeout(()=>{
      let scrollResponder=this.refs.scrollView.getScrollResponder();
      scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
        React.findNodeHandle(_this.refs[refName]),
        this.props.offset, //additionalOffset
        true
      );
    }, 50);
  }
}) // KeyboardHandler

module.exports=KeyboardHandler;

Answer 2

Facebook开源键盘避免查看在反应原生0.29中解决这个问题。文档和使用示例可以在这里找到。

Answer 3

2017 年回答

键盘避免查看可能是现在最好的方式。查看此处的文档。与Keyboard（键盘）模块相比，它确实很简单，它给开发者更多的控制来执行动画。斯宾塞·卡利在他的媒体博客上展示了所有可能的方式。

2015年回答

在 react-native 中执行此操作的正确方法不需要外部库，利用本机代码，并包含动画。

首先定义一个函数，该函数将处理每个TextInput（或您想滚动到的任何其他组件）的onFocusonFocus事件：

// Scroll a component into view. Just pass the component ref string.
inputFocused (refName) {
  setTimeout(() => {
    let scrollResponder = this.refs.scrollView.getScrollResponder();
    scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
      React.findNodeHandle(this.refs[refName]),
      110, //additionalOffset
      true
    );
  }, 50);
}

然后，在你的渲染函数中：

render () {
  return (
    <ScrollView ref='scrollView'>
        <TextInput ref='username' 
                   onFocus={this.inputFocused.bind(this, 'username')}
    </ScrollView>
  )
}

这将使用 RCT设备事件事件和大小调整器，使用 RCTUIManager.measureLayout 测量组件的位置，并计算滚动响应输入测量和滚动到键盘板所需的确切滚动移动。

您可能希望使用其他Offset参数，以满足特定UI设计的需求。