反应本土滚动视图 - scrollToEnd - Android电子

Question

我试图调用，将射击在onFoucs上TextInput将滚动了滚动一路下跌的函数（使用scrollToEnd()）

，所以这是我的类组件

class MyCMP extends Component { 

    constructor(props) { 
    super(props); 
    this.onInputFocus = this.onInputFocus.bind(this); 
    } 

    onInputFocus() { 
    setTimeout(() => { 
     this.refs.scroll.scrollToEnd(); 
     console.log('done scrolling'); 
    }, 1); 
    } 

    render() { 
    return (
     <View> 
     <ScrollView ref="scroll"> 
      { /* items */ } 
     </ScrollView> 
     <TextInput onFocus={this.onInputFocus} /> 
     </View> 
    ); 
    } 
} 

export default MyCMP; 

上述工程的组成部分，它不会滚动，但它需要大量的时间......我使用setTimeout，因为如果没有它只是下降的屏幕，不计算keybaord的高度，因此不会向下滚动足够，即使我继续打字（并且触发对输入的关注），它仍然不会sc一路向下滚动。

现在我处理一些很好的时间，我没有设置windowSoftInputMode到adjustResize，我也通过一些模块去像react-native-keyboard-aware-scroll-view或react-native-auto-scroll但没有人真正做的工作，因为我需要它。

任何方向如何使它做正确的方式将非常感激。谢谢！

Answer 1

而不是使用setTimeout您使用Keyboard API react-native。您为键盘显示添加事件侦听器，然后滚动视图结束。如果组件中有多个输入，则可能需要创建一些关于哪些输入关注的逻辑，但是如果您只有一个输入，则可以像下面的示例那样执行。

另一件好事是将你的参考文献更改为功能文献，因为字符串参考被认为是遗留的，并且将在未来版本的反应中被删除。更多信息here。

class MyCMP extends Component { 

    constructor(props) { 
    super(props); 
    this.scroll = null; 
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this)); 
    } 

    componentWillUnmount() { 
    this.keyboardDidShowListener.remove(); 
    } 

    _keyboardDidShow() { 
    this.scroll.scrollToEnd(); 
    } 

    render() { 
    return (
     <View> 
     <ScrollView ref={(scroll) => {this.scroll = scroll;}}> 
      { /* items */ } 
     </ScrollView> 
     <TextInput /> 
     </View> 
    ); 
    } 
} 

export default MyCMP;