react-native scrollView - scrollToEnd - 在Android上

Question

我正在尝试调用一个将在 TextInput 上触发 onFoucs 的函数这将滚动 ScrollView 一直向下(使用 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因为没有它，它只是在不计算键盘高度的情况下向下滚动，所以它向下滚动的不够，即使我继续打字(并触发对输入的关注)它仍然不会一直向下滚动。

我现在正在处理它，我确实设置了 windowSoftInputMode至 adjustResize我确实经历了一些模块，如 react-native-keyboard-aware-scroll-view或 react-native-auto-scroll但他们都没有真正完成我需要的工作。

任何如何使其以正确方式完成的方向都将不胜感激。谢谢!

Answer 1

而不是使用 setTimeout您使用 Keyboard API react 原生的。您为键盘显示添加事件监听器，然后 ScrollView 以结束。如果您的组件中有多个输入，您可能需要创建一些输入关注的逻辑，但如果您只有一个，您可以像下面的示例一样执行此操作。

另一件好事是将您的 refs 更改为功能性的，因为 string refs 被认为是遗留的，并将在 future 的 react 版本中删除。更多信息 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;